File: D:/HostingSpaces/SBogers84/zuiderbos.nl/html/css/style.css
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
@keyframes movingDown {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
-spec-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, 8px, 0) rotate(0deg);
-moz-transform: translate3d(0, 8px, 0) rotate(0deg);
-ms-transform: translate3d(0, 8px, 0) rotate(0deg);
-o-transform: translate3d(0, 8px, 0) rotate(0deg);
-spec-transform: translate3d(0, 8px, 0) rotate(0deg);
transform: translate3d(0, 8px, 0) rotate(0deg);
}
}
@keyframes movingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
}
/* ==========================================================================
* Functions used in grid calculation
* ========================================================================== */
/**
* * This is where the magic happens
* * Return percentage based on amount of columns
* * Use parent column size to adjust the origin
* */
/**
* * Default function for columns
* * Return as percentage
* */
/**
* * Return as viewport width
* */
/*==========================================================================
* Font related functions
* ========================================================================== */
/**
* * Add some functions for readability
* * Return font-weight based on name
* */
/**
* * Define grid columns
* * The inner grid is the section where the content is
* * The outer grid is the inner grid with extra margin columns on each side
* */
/**
* * Define breakpoint for given formats
* */
html, body {
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* * Set up the base font size for using rem
* */
html {
font-size: 20px;
}
@media screen and (max-width: 1080px) {
html {
font-size: 17px;
}
}
body {
font-family: "Cabin", sans-serif;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.4px;
}
@media screen and (max-width: 840px) {
body {
padding-top: 60px;
}
}
* {
box-sizing: border-box;
}
* ::selection {
background: #1d88e6;
color: white;
}
img {
border: none;
display: block;
}
h1, h2, h3, h4, h5, figure {
margin: 0;
}
img {
border: none;
}
input, textarea {
font-family: "Cabin", sans-serif;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
}
input:-moz-placeholder, textarea:-moz-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
}
.image-wrapper {
background-image: url("/img/forest_top_view.jpg");
background-position: bottom right;
background-size: cover;
position: relative;
}
[class^=vso] .image-wrapper {
background-image: url("/img/forest_top_view_green.jpg");
}
[class^=services] .image-wrapper, [class^=foundation] .image-wrapper, [class^=jobs] .image-wrapper, [class^=academy] .image-wrapper {
background-image: url("/img/forest_top_view_grey.jpg");
}
@media screen and (max-width: 840px) {
.image-wrapper {
background: none;
}
.image-wrapper .icon {
display: none !important;
}
}
.top_bar {
width: 100%;
position: relative;
height: 30px;
background-color: #2E80A8;
color: white;
text-align: center;
font-size: 15px;
line-height: 30px;
}
.top_bar a {
color: white;
text-decoration: none;
}
a[href^="mailto:"] {
font-family: "Lato", sans-serif;
letter-spacing: 1.1px;
font-weight: 400;
}
iframe {
width: 100%;
aspect-ratio: 16/9;
border: 5px solid white;
}
/*==========================================================================
* Grid
* ========================================================================== */
/**
* * Grid row
* *
* * 1. The outer two columns are just margin
* * 2. Prevent inline-block cells wrapping
* * 3. Prevent vertical spacing between inline-blocks
* */
.grid-row {
width: 85.7142857143%;
max-width: 1680px;
margin: 0 auto;
font-size: 0;
line-height: 0;
letter-spacing: 0;
/**
* * The full row doesn't have the two outer margin rows
* * They stretch till both ends of the window
* */
}
.grid-row.full-row {
width: 100%;
max-width: none;
}
/**
* * Grid column
* *
* * 1. Reset white-space inherited from `.grid`
* * 2. Reset font-size inherited from `.grid`
* * 3. Reset line-height inherited from `.grid`
* * 3. Reset letter-spacing inherited from `.grid`
* */
.grid-col {
position: relative;
display: inline-block;
overflow: hidden;
white-space: normal;
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.4px;
/**
* * Center column
* *
* * 1. 'inline-block' doesn't center with margin '0 auto'
* */
}
.grid-col.center {
display: block;
margin: 0 auto;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-1, .col-lg-1 {
width: 8.3333333333%;
}
.full-row .col-1, .full-row .col-lg-1 {
width: 7.1428571429%;
}
/* Column shifts
* ========================================================================== */
.offset-1, .offset-lg-1 {
margin-left: 8.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-2, .col-lg-2 {
width: 16.6666666667%;
}
.full-row .col-2, .full-row .col-lg-2 {
width: 14.2857142857%;
}
/* Column shifts
* ========================================================================== */
.offset-2, .offset-lg-2 {
margin-left: 16.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-3, .col-lg-3 {
width: 25%;
}
.full-row .col-3, .full-row .col-lg-3 {
width: 21.4285714286%;
}
/* Column shifts
* ========================================================================== */
.offset-3, .offset-lg-3 {
margin-left: 25%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-4, .col-lg-4 {
width: 33.3333333333%;
}
.full-row .col-4, .full-row .col-lg-4 {
width: 28.5714285714%;
}
/* Column shifts
* ========================================================================== */
.offset-4, .offset-lg-4 {
margin-left: 33.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-5, .col-lg-5 {
width: 41.6666666667%;
}
.full-row .col-5, .full-row .col-lg-5 {
width: 35.7142857143%;
}
/* Column shifts
* ========================================================================== */
.offset-5, .offset-lg-5 {
margin-left: 41.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-6, .col-lg-6 {
width: 50%;
}
.full-row .col-6, .full-row .col-lg-6 {
width: 42.8571428571%;
}
/* Column shifts
* ========================================================================== */
.offset-6, .offset-lg-6 {
margin-left: 50%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-7, .col-lg-7 {
width: 58.3333333333%;
}
.full-row .col-7, .full-row .col-lg-7 {
width: 50%;
}
/* Column shifts
* ========================================================================== */
.offset-7, .offset-lg-7 {
margin-left: 58.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-8, .col-lg-8 {
width: 66.6666666667%;
}
.full-row .col-8, .full-row .col-lg-8 {
width: 57.1428571429%;
}
/* Column shifts
* ========================================================================== */
.offset-8, .offset-lg-8 {
margin-left: 66.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-9, .col-lg-9 {
width: 75%;
}
.full-row .col-9, .full-row .col-lg-9 {
width: 64.2857142857%;
}
/* Column shifts
* ========================================================================== */
.offset-9, .offset-lg-9 {
margin-left: 75%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-10, .col-lg-10 {
width: 83.3333333333%;
}
.full-row .col-10, .full-row .col-lg-10 {
width: 71.4285714286%;
}
/* Column shifts
* ========================================================================== */
.offset-10, .offset-lg-10 {
margin-left: 83.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-11, .col-lg-11 {
width: 91.6666666667%;
}
.full-row .col-11, .full-row .col-lg-11 {
width: 78.5714285714%;
}
/* Column shifts
* ========================================================================== */
.offset-11, .offset-lg-11 {
margin-left: 91.6666666667%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-12, .col-lg-12 {
width: 100%;
}
.full-row .col-12, .full-row .col-lg-12 {
width: 85.7142857143%;
}
/* Column shifts
* ========================================================================== */
.offset-12, .offset-lg-12 {
margin-left: 100%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-13, .col-lg-13 {
width: 108.3333333333%;
}
.full-row .col-13, .full-row .col-lg-13 {
width: 92.8571428571%;
}
/* Column shifts
* ========================================================================== */
.offset-13, .offset-lg-13 {
margin-left: 108.3333333333%;
}
/* Column dimensions
* ========================================================================== */
/* * Calculate width by dividing a full width into 12 columns
* * Create a class for each column
* */
.col-14, .col-lg-14 {
width: 116.6666666667%;
}
.full-row .col-14, .full-row .col-lg-14 {
width: 100%;
}
/* Column shifts
* ========================================================================== */
.offset-14, .offset-lg-14 {
margin-left: 116.6666666667%;
}
/* Media queries
* ========================================================================== */
*
* /*
* * Create a separate loop because of order for css rendering
* * because else it would overrule a previous media query
* */
@media screen and (min-width: 1680px) {
.col-xl-1 {
width: 8.3333333333%;
}
.offset-xl-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 1366px) {
.col-md-1 {
width: 8.3333333333%;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.3333333333%;
}
.offset-sm-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-1 {
width: 8.3333333333%;
}
.offset-xs-1 {
margin-left: 8.3333333333%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-2 {
width: 16.6666666667%;
}
.offset-xl-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 1366px) {
.col-md-2 {
width: 16.6666666667%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-2 {
width: 16.6666666667%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-2 {
width: 16.6666666667%;
}
.offset-xs-2 {
margin-left: 16.6666666667%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-3 {
width: 25%;
}
.offset-xl-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 1366px) {
.col-md-3 {
width: 25%;
}
.offset-md-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 768px) {
.col-sm-3 {
width: 25%;
}
.offset-sm-3 {
margin-left: 25%;
}
}
@media screen and (max-width: 400px) {
.col-xs-3 {
width: 25%;
}
.offset-xs-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-4 {
width: 33.3333333333%;
}
.offset-xl-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 1366px) {
.col-md-4 {
width: 33.3333333333%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
width: 33.3333333333%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-4 {
width: 33.3333333333%;
}
.offset-xs-4 {
margin-left: 33.3333333333%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-5 {
width: 41.6666666667%;
}
.offset-xl-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 1366px) {
.col-md-5 {
width: 41.6666666667%;
}
.offset-md-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-5 {
width: 41.6666666667%;
}
.offset-sm-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-5 {
width: 41.6666666667%;
}
.offset-xs-5 {
margin-left: 41.6666666667%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-6 {
width: 50%;
}
.offset-xl-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 1366px) {
.col-md-6 {
width: 50%;
}
.offset-md-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 768px) {
.col-sm-6 {
width: 50%;
}
.offset-sm-6 {
margin-left: 50%;
}
}
@media screen and (max-width: 400px) {
.col-xs-6 {
width: 50%;
}
.offset-xs-6 {
margin-left: 50%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-7 {
width: 58.3333333333%;
}
.offset-xl-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 1366px) {
.col-md-7 {
width: 58.3333333333%;
}
.offset-md-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-7 {
width: 58.3333333333%;
}
.offset-sm-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-7 {
width: 58.3333333333%;
}
.offset-xs-7 {
margin-left: 58.3333333333%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-8 {
width: 66.6666666667%;
}
.offset-xl-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 1366px) {
.col-md-8 {
width: 66.6666666667%;
}
.offset-md-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-8 {
width: 66.6666666667%;
}
.offset-sm-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-8 {
width: 66.6666666667%;
}
.offset-xs-8 {
margin-left: 66.6666666667%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-9 {
width: 75%;
}
.offset-xl-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 1366px) {
.col-md-9 {
width: 75%;
}
.offset-md-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 768px) {
.col-sm-9 {
width: 75%;
}
.offset-sm-9 {
margin-left: 75%;
}
}
@media screen and (max-width: 400px) {
.col-xs-9 {
width: 75%;
}
.offset-xs-9 {
margin-left: 75%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-10 {
width: 83.3333333333%;
}
.offset-xl-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 1366px) {
.col-md-10 {
width: 83.3333333333%;
}
.offset-md-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-10 {
width: 83.3333333333%;
}
.offset-sm-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-10 {
width: 83.3333333333%;
}
.offset-xs-10 {
margin-left: 83.3333333333%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-11 {
width: 91.6666666667%;
}
.offset-xl-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 1366px) {
.col-md-11 {
width: 91.6666666667%;
}
.offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-11 {
width: 91.6666666667%;
}
.offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-11 {
width: 91.6666666667%;
}
.offset-xs-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-12 {
width: 100%;
}
.offset-xl-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 1366px) {
.col-md-12 {
width: 100%;
}
.offset-md-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 768px) {
.col-sm-12 {
width: 100%;
}
.offset-sm-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 400px) {
.col-xs-12 {
width: 100%;
}
.offset-xs-12 {
margin-left: 100%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-13 {
width: 108.3333333333%;
}
.offset-xl-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 1366px) {
.col-md-13 {
width: 108.3333333333%;
}
.offset-md-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 768px) {
.col-sm-13 {
width: 108.3333333333%;
}
.offset-sm-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (max-width: 400px) {
.col-xs-13 {
width: 108.3333333333%;
}
.offset-xs-13 {
margin-left: 108.3333333333%;
}
}
@media screen and (min-width: 1680px) {
.col-xl-14 {
width: 116.6666666667%;
}
.offset-xl-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 1366px) {
.col-md-14 {
width: 116.6666666667%;
}
.offset-md-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 768px) {
.col-sm-14 {
width: 116.6666666667%;
}
.offset-sm-14 {
margin-left: 116.6666666667%;
}
}
@media screen and (max-width: 400px) {
.col-xs-14 {
width: 116.6666666667%;
}
.offset-xs-14 {
margin-left: 116.6666666667%;
}
}
.block {
display: inline-block;
width: 250px;
border: solid lightgrey 1px;
margin: 20px;
padding: 10px;
}
/*==========================================================================
* Navigation / Header
* ========================================================================== */
header {
padding-bottom: 40px;
position: relative;
/* Navigation
* ========================================================================== */
}
header .grid-row {
overflow: visible;
}
header .grid-col {
vertical-align: top;
overflow: visible;
}
header .logo {
padding-top: 75px;
overflow: visible;
}
header .logo a {
text-decoration: none;
}
header .logo span {
display: block;
width: 70px;
}
header .logo span img {
width: 100%;
}
header .logo p {
font-weight: 600;
color: white;
}
header .logo p strong {
font-weight: 600;
color: #4fc2f8;
}
header .logo .root-link {
position: absolute;
width: 100%;
min-width: 220px;
left: 0;
bottom: -30px;
color: #1d88e6;
font-size: 0.7rem;
transition: color 0.3s;
}
header .logo .root-link:before {
content: "";
display: inline-block;
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -148px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
opacity: 0.6;
transition: transform 0.3s, opacity 0.3s;
}
header .logo .root-link:hover {
color: #4ba0eb;
}
header .logo .root-link:hover:before {
opacity: 1;
-webkit-transform: translate3d(-5px, 0, 0) rotate(180deg);
-moz-transform: translate3d(-5px, 0, 0) rotate(180deg);
-ms-transform: translate3d(-5px, 0, 0) rotate(180deg);
-o-transform: translate3d(-5px, 0, 0) rotate(180deg);
-spec-transform: translate3d(-5px, 0, 0) rotate(180deg);
transform: translate3d(-5px, 0, 0) rotate(180deg);
}
[class^=vso] header .logo p {
color: #80deea;
}
[class^=vso] header .logo p strong {
color: #25c6da;
}
[class^=vso] header .logo .root-link {
color: #25c6da;
}
[class^=vso] header .logo .root-link:hover {
color: #66d7e5;
}
[class^=services] header .logo p, [class^=services] header .logo p strong, [class^=foundation] header .logo p, [class^=foundation] header .logo p strong, [class^=jobs] header .logo p, [class^=jobs] header .logo p strong, [class^=academy] header .logo p, [class^=academy] header .logo p strong {
color: #b8d6e6;
}
[class^=services] header .logo .root-link, [class^=foundation] header .logo .root-link, [class^=jobs] header .logo .root-link, [class^=academy] header .logo .root-link {
color: #b8d6e6;
}
[class^=services] header .logo .root-link:before, [class^=foundation] header .logo .root-link:before, [class^=jobs] header .logo .root-link:before, [class^=academy] header .logo .root-link:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
}
[class^=services] header .logo .root-link:hover, [class^=foundation] header .logo .root-link:hover, [class^=jobs] header .logo .root-link:hover, [class^=academy] header .logo .root-link:hover {
color: #f1f7fa;
}
header nav {
position: relative;
/* Secondary navigation
* ===============================*/
/* Primary navigation
* ===============================*/
}
header nav .tablet-logo {
position: absolute;
left: 8.3333333333%;
top: 20px;
transform: scale(0.6);
transform-origin: 0 0;
display: none;
}
header nav .tablet-logo a {
text-decoration: none;
}
header nav .tablet-logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") 0 0 no-repeat;
background-size: 502px 423px;
width: 94px;
height: 200px;
display: block;
}
[class^=vso] header nav .tablet-logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") 0 -205px no-repeat;
background-size: 502px 423px;
width: 94px;
height: 200px;
}
header nav .office {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 75px;
text-align: right;
font-size: 0.7rem;
font-weight: 600;
}
header nav .office a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
color: #1d88e6;
text-decoration: none;
transition: color 0.3s;
}
header nav .office a:hover {
color: #4ba0eb;
}
header nav .office a:before {
content: "";
display: inline-block;
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
[class^=vso] header nav .office a {
color: #25c6da;
}
[class^=vso] header nav .office a:hover {
color: #66d7e5;
}
[class^=vso] header nav .office a:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -131px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
[class^=services] header nav .office a, [class^=foundation] header nav .office a, [class^=jobs] header nav .office a, [class^=academy] header nav .office a {
color: #a1cee6;
}
[class^=services] header nav .office a:hover, [class^=foundation] header nav .office a:hover, [class^=jobs] header nav .office a:hover, [class^=academy] header nav .office a:hover {
color: #b5d9eb;
}
[class^=services] header nav .office a:before, [class^=foundation] header nav .office a:before, [class^=jobs] header nav .office a:before, [class^=academy] header nav .office a:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -131px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
header nav .secondary {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
font-size: 0.8rem;
line-height: 1;
}
header nav .secondary li {
display: inline-block;
position: relative;
}
header nav .secondary li:before {
content: "•";
display: inline-block;
margin: 0 8px;
color: #c5caea;
}
header nav .secondary li:first-of-type:before {
display: none;
}
header nav .secondary li:last-of-type {
padding-right: 0;
}
header nav .secondary li a {
padding-bottom: 6px;
color: #c5caea;
text-decoration: none;
transition: color 0.3s;
}
header nav .secondary li:hover .secondary__submenu {
pointer-events: auto;
opacity: 1;
transform: translate3d(0, 0, 0);
}
header nav .secondary li:hover > a {
color: white;
}
header nav .secondary li.active > a {
border-bottom: 3px solid #ffb200;
color: white;
}
header nav .secondary li .secondary__submenu {
position: absolute;
z-index: 5;
left: 26px;
top: 100%;
padding-top: 10px;
text-align: left;
list-style: none;
pointer-events: none;
transform: translate3d(0, -10px, 0);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: all 0.3s ease-in-out;
}
header nav .secondary li .secondary__submenu-grid {
min-width: 120px;
max-width: 250px;
background-color: white;
}
header nav .secondary li .secondary__submenu-grid.has-double {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
width: 400px;
max-width: none;
}
header nav .secondary li .secondary__submenu-grid.has-double .secondary__sublist {
width: 50%;
}
header nav .secondary li .secondary__submenu-grid.has-double .secondary__sublist:first-child {
border-right: 1px solid #f1f1f1;
}
header nav .secondary li .secondary__sublist {
padding: 0;
margin: 0;
}
header nav .secondary li .secondary__sublist-link {
display: block;
padding: 10px 15px;
color: #002382;
transition: color 0.2s;
}
[class^=vso] header nav .secondary li .secondary__sublist-link {
color: #0098a6;
}
header nav .secondary li .secondary__sublist-item {
display: block;
background-color: transparent;
transition: background-color 0.2s;
}
header nav .secondary li .secondary__sublist-item.is-active {
background-color: #f1f1f1;
}
header nav .secondary li .secondary__sublist-item:before {
display: none;
}
header nav .secondary li .secondary__sublist-item:hover {
background-color: #4fc2f8;
}
header nav .secondary li .secondary__sublist-item:hover .secondary__sublist-link {
color: white;
}
[class^=vso] header nav .secondary li .secondary__sublist-item:hover {
background-color: #25c6da;
}
[class^=vso] header nav .secondary li:before {
color: #80deea;
}
[class^=vso] header nav .secondary li a {
color: #80deea;
}
[class^=vso] header nav .secondary li:hover > a {
color: white;
}
[class^=vso] header nav .secondary li.active > a {
color: white;
}
[class^=services] header nav .secondary li:before, [class^=foundation] header nav .secondary li:before, [class^=jobs] header nav .secondary li:before, [class^=academy] header nav .secondary li:before {
color: #b8d6e6;
}
[class^=services] header nav .secondary li a, [class^=foundation] header nav .secondary li a, [class^=jobs] header nav .secondary li a, [class^=academy] header nav .secondary li a {
color: #b8d6e6;
}
[class^=services] header nav .secondary li:hover a, [class^=foundation] header nav .secondary li:hover a, [class^=jobs] header nav .secondary li:hover a, [class^=academy] header nav .secondary li:hover a {
color: white;
}
[class^=services] header nav .secondary li.active a, [class^=foundation] header nav .secondary li.active a, [class^=jobs] header nav .secondary li.active a, [class^=academy] header nav .secondary li.active a {
color: white;
}
header nav .primary {
position: relative;
z-index: 3;
list-style: none;
height: 60px;
width: 75%;
margin: 60px 0 0 auto;
font-size: 0.9rem;
/* Search block
* ===============================*/
}
header nav .primary.wider {
width: 85%;
}
@media screen and (max-width: 1200px) {
header nav .primary {
font-size: 0.8rem;
}
}
@media screen and (max-width: 1000px) {
header nav .primary {
font-size: 0.9rem;
}
}
header nav .primary:before {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
display: block;
width: 100%;
height: 100%;
border-radius: 30px;
}
header nav .primary:hover:before {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
header nav .primary > ul {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
list-style: none;
width: calc(100% - 60px);
height: 100%;
margin: 0;
padding: 0;
}
header nav .primary > ul .primary__item {
position: relative;
display: inline-block;
height: 100%;
line-height: 1;
background-color: #002382;
flex-grow: 1;
transition: all 0.3s;
}
header nav .primary > ul .primary__item:first-of-type {
padding-left: 10px;
border-radius: 30px 0 0 30px;
}
header nav .primary > ul .primary__item > a {
position: relative;
z-index: 6;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 100%;
color: #c5caea;
text-decoration: none;
}
header nav .primary > ul .primary__item:hover {
background-color: #001c69;
}
header nav .primary > ul .primary__item:hover .primary__submenu {
pointer-events: auto;
opacity: 1;
transform: translate3d(0, 0, 0);
}
header nav .primary > ul .primary__item.active {
background-color: #ffb200;
}
header nav .primary > ul .primary__item.active > a {
color: white;
font-weight: 600;
}
header nav .primary > ul .primary__item:last-child .primary__submenu {
left: auto;
right: 0;
}
header nav .primary > ul .primary__submenu {
position: absolute;
z-index: -1;
left: 0;
top: 100%;
text-align: left;
list-style: none;
pointer-events: none;
transform: translate3d(0, -10px, 0);
opacity: 0;
transition: all 0.3s ease-in-out;
}
header nav .primary > ul .primary__submenu:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 100%;
width: 100%;
height: 30px;
background-color: #002382;
}
header nav .primary > ul .primary__submenu-grid {
min-width: 120px;
max-width: 250px;
background-color: #002382;
}
header nav .primary > ul .primary__submenu-grid.has-double {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
width: 464px;
max-width: none;
}
header nav .primary > ul .primary__submenu-grid.has-double .primary__sublist {
width: 50%;
}
header nav .primary > ul .primary__submenu-grid.has-double .primary__sublist:first-child {
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
header nav .primary > ul .primary__sublist {
padding: 10px 0 0;
margin: 0;
}
header nav .primary > ul .primary__sublist-link {
display: block;
padding: 10px 15px;
color: #c5caea;
font-size: 0.8rem;
text-decoration: none;
transition: color 0.2s;
}
[class^=vso] header nav .primary > ul .primary__sublist-link {
color: #0098a6;
}
header nav .primary > ul .primary__sublist-item {
display: block;
background-color: transparent;
transition: background-color 0.2s;
}
header nav .primary > ul .primary__sublist-item.is-active {
background-color: rgba(255, 255, 255, 0.2);
}
header nav .primary > ul .primary__sublist-item:before {
display: none;
}
header nav .primary > ul .primary__sublist-item:hover {
background-color: #4fc2f8;
}
header nav .primary > ul .primary__sublist-item:hover .primary__sublist-link {
color: white;
}
[class^=vso] header nav .primary > ul .primary__sublist-item:hover {
background-color: #80deea;
}
[class^=vso] header nav .primary:hover:before {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}
[class^=vso] header nav .primary > ul .primary__item {
background-color: #25c6da;
}
[class^=vso] header nav .primary > ul .primary__item a {
color: white;
opacity: 0.8;
}
[class^=vso] header nav .primary > ul .primary__item:hover {
background-color: #21b2c4;
}
[class^=vso] header nav .primary > ul .primary__item.active {
background-color: #ffb200;
}
[class^=vso] header nav .primary > ul .primary__item.active a {
opacity: 1;
}
[class^=vso] header nav .primary .primary__submenu-grid {
background-color: #25c6da;
}
[class^=vso] header nav .primary .primary__submenu:before {
background-color: #25c6da;
}
[class^=services] header nav .primary:hover:before, [class^=foundation] header nav .primary:hover:before, [class^=jobs] header nav .primary:hover:before, [class^=academy] header nav .primary:hover:before {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}
[class^=services] header nav .primary > ul .primary__item, [class^=foundation] header nav .primary > ul .primary__item, [class^=jobs] header nav .primary > ul .primary__item, [class^=academy] header nav .primary > ul .primary__item {
background-color: #4e7f99;
}
[class^=services] header nav .primary > ul .primary__item a, [class^=foundation] header nav .primary > ul .primary__item a, [class^=jobs] header nav .primary > ul .primary__item a, [class^=academy] header nav .primary > ul .primary__item a {
color: white;
opacity: 0.8;
}
[class^=services] header nav .primary > ul .primary__item:hover, [class^=foundation] header nav .primary > ul .primary__item:hover, [class^=jobs] header nav .primary > ul .primary__item:hover, [class^=academy] header nav .primary > ul .primary__item:hover {
background-color: #457188;
}
[class^=services] header nav .primary > ul .primary__item.active, [class^=foundation] header nav .primary > ul .primary__item.active, [class^=jobs] header nav .primary > ul .primary__item.active, [class^=academy] header nav .primary > ul .primary__item.active {
background-color: #ffb200;
}
[class^=services] header nav .primary > ul .primary__item.active a, [class^=foundation] header nav .primary > ul .primary__item.active a, [class^=jobs] header nav .primary > ul .primary__item.active a, [class^=academy] header nav .primary > ul .primary__item.active a {
opacity: 1;
}
[class^=services] header nav .primary .primary__submenu-grid, [class^=foundation] header nav .primary .primary__submenu-grid, [class^=jobs] header nav .primary .primary__submenu-grid, [class^=academy] header nav .primary .primary__submenu-grid {
background-color: #4e7f99;
}
[class^=services] header nav .primary .primary__submenu:before, [class^=foundation] header nav .primary .primary__submenu:before, [class^=jobs] header nav .primary .primary__submenu:before, [class^=academy] header nav .primary .primary__submenu:before {
background-color: #4e7f99;
}
@media screen and (max-width: 1500px) {
header nav .primary {
width: 100%;
}
}
header nav .primary #search-form {
position: absolute;
z-index: 6;
border-radius: 30px;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-color: transparent;
transition: background-color 0.5s, width 0.5s;
}
header nav .primary #search-form .submit-button {
color: transparent;
}
header nav .primary #search-form.show {
width: 100%;
background-color: #f1f1f1;
}
header nav .primary #search-form.show .submit-button {
z-index: 4;
color: white;
width: 150px;
opacity: 1;
}
header nav .primary #search-form.show #enable-search {
width: 150px;
}
header nav .primary #search-form.show #enable-search:before {
opacity: 0;
}
header nav .primary #search-form.show input {
opacity: 1;
}
header nav .primary #search-form.show .close {
opacity: 1;
right: 175px;
transition: right 0.4s ease-in-out 0s, transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0.3s;
}
header nav .primary #search-form #enable-search {
position: absolute;
right: 0;
top: 0;
z-index: 4;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #4fc2f8;
cursor: pointer;
transition: width 0.3s, background-color 0.3s;
border-radius: 0 60px 60px 0;
}
header nav .primary #search-form #enable-search:before {
content: "";
position: relative;
left: -3px;
display: inline-block;
opacity: 1;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -135px -175px no-repeat;
background-size: 502px 423px;
width: 16px;
height: 16px;
transition: opacity 0.4s;
}
header nav .primary #search-form #enable-search:hover {
background-color: #1eb1f6;
}
[class^=vso] header nav .primary #search-form #enable-search {
background-color: #6be9f2;
}
[class^=vso] header nav .primary #search-form #enable-search:hover {
background-color: #33e1ed;
}
[class^=services] header nav .primary #search-form #enable-search, [class^=foundation] header nav .primary #search-form #enable-search, [class^=jobs] header nav .primary #search-form #enable-search, [class^=academy] header nav .primary #search-form #enable-search {
background-color: #4fc2f8;
}
[class^=services] header nav .primary #search-form #enable-search:hover, [class^=foundation] header nav .primary #search-form #enable-search:hover, [class^=jobs] header nav .primary #search-form #enable-search:hover, [class^=academy] header nav .primary #search-form #enable-search:hover {
background-color: #36baf7;
}
header nav .primary #search-form .close {
position: absolute;
z-index: 5;
right: -15px;
top: 23px;
display: inline-block;
cursor: pointer;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -154px -180px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 14px;
opacity: 0;
transform-origin: 50% 50%;
transition: right 0.4s ease-in-out 0s, transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s;
}
[class^=vso] header nav .primary #search-form .close {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -168px -180px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 14px;
}
header nav .primary #search-form .close:hover {
transform: rotate(180deg);
}
header nav .primary #search-form input {
position: absolute;
width: calc(100% - 120px);
padding-left: 4%;
height: 100%;
font-size: 1rem;
color: #0f46a1;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-spec-appearance: none;
appearance: none;
opacity: 0;
background-color: transparent;
border: none;
transition: opacity 0.3s;
}
header nav .primary #search-form input:focus {
outline: none;
}
header nav .primary #search-form input:-webkit-autofill, header nav .primary #search-form input:-webkit-autofill:hover, header nav .primary #search-form input:-webkit-autofill:focus, header nav .primary #search-form input:-webkit-autofill:active {
transition: 9999s background-color;
-webkit-text-fill-color: #0f46a1;
transition-delay: 9999s;
}
header nav .primary #search-form input::-webkit-input-placeholder {
color: #0f46a1;
}
header nav .primary #search-form input::-moz-placeholder {
color: #0f46a1;
}
header nav .primary #search-form input:-moz-placeholder {
color: #0f46a1;
}
header nav .primary #search-form input:-ms-input-placeholder {
color: #0f46a1;
}
header nav .primary #search-form input[type=submit] {
display: none;
}
header nav .primary #search-form .submit-button {
position: absolute;
right: 0;
top: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 0;
height: 60px;
opacity: 0;
cursor: pointer;
background-color: transparent;
font-weight: 700;
transition: opacity 0.3s, background-color 0.3s;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
header nav .primary #search-form .submit-button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
header nav .primary #search-form .submit-button:hover {
background-color: #1eb1f6;
}
[class^=vso] header nav .primary #search-form .submit-button:hover {
background-color: #33e1ed;
}
[class^=services] header nav .primary #search-form .submit-button:hover, [class^=foundation] header nav .primary #search-form .submit-button:hover, [class^=jobs] header nav .primary #search-form .submit-button:hover, [class^=academy] header nav .primary #search-form .submit-button:hover {
background-color: #36baf7;
}
header nav .primary #search-form .submit-button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
@media screen and (max-width: 1000px) {
header .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
header .logo {
-webkit-order: 2;
-ms-order: 2;
order: 2;
padding-top: 20px;
width: 40%;
}
header .logo span {
display: none;
}
header nav {
-webkit-order: 1;
-ms-order: 1;
order: 1;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 100% !important;
overflow: visible !important;
}
header nav .primary {
width: 91.6666666667%;
}
header nav .office {
height: 100px;
}
header nav .tablet-logo {
display: block;
}
header nav .breadcrumb {
margin-top: -20px;
position: relative;
top: 62px;
width: 50%;
}
}
@media screen and (max-width: 840px) {
header {
display: none;
}
}
/*==========================================================================
* Breadcrumb
* ========================================================================== */
.breadcrumb {
width: 62.5%;
margin: 90px 0 0 auto;
font-size: 0.7rem;
}
.breadcrumb ol, .breadcrumb ul {
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb ol li, .breadcrumb ul li {
display: inline-block;
}
.breadcrumb ol li a, .breadcrumb ul li a {
text-decoration: none;
color: #1d88e6;
}
.breadcrumb ol li a span, .breadcrumb ol li a:after, .breadcrumb ul li a span, .breadcrumb ul li a:after {
color: #1d88e6;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb ol li a:hover span, .breadcrumb ol li a:hover:after, .breadcrumb ul li a:hover span, .breadcrumb ul li a:hover:after {
color: #62acee;
}
.breadcrumb ol li:nth-child(2) a, .breadcrumb ol li:nth-child(2) span, .breadcrumb ul li:nth-child(2) a, .breadcrumb ul li:nth-child(2) span {
text-transform: capitalize;
}
.breadcrumb ol li:not(:last-child):after, .breadcrumb ul li:not(:last-child):after {
content: ">";
display: inline-block;
margin: 0 8px -4px;
color: #1d88e6;
}
.breadcrumb ol li:first-of-type, .breadcrumb ul li:first-of-type {
display: none;
}
.breadcrumb ol li:last-child a, .breadcrumb ol li:last-child span, .breadcrumb ul li:last-child a, .breadcrumb ul li:last-child span {
font-weight: 700;
color: #c5caea;
}
.breadcrumb ol li:last-child a:hover, .breadcrumb ol li:last-child span:hover, .breadcrumb ul li:last-child a:hover, .breadcrumb ul li:last-child span:hover {
color: #eaecf8;
}
[class^=vso] .breadcrumb ol li a, [class^=vso] .breadcrumb ul li a {
color: #25c6da;
}
[class^=vso] .breadcrumb ol li a span, [class^=vso] .breadcrumb ol li a:after, [class^=vso] .breadcrumb ul li a span, [class^=vso] .breadcrumb ul li a:after {
color: #25c6da;
}
[class^=vso] .breadcrumb ol li a:hover span, [class^=vso] .breadcrumb ol li a:hover:after, [class^=vso] .breadcrumb ul li a:hover span, [class^=vso] .breadcrumb ul li a:hover:after {
color: #66d7e5;
}
[class^=vso] .breadcrumb ol li:last-child a, [class^=vso] .breadcrumb ol li:last-child span, [class^=vso] .breadcrumb ul li:last-child a, [class^=vso] .breadcrumb ul li:last-child span {
color: #80deea;
}
[class^=vso] .breadcrumb ol li:last-child a:hover, [class^=vso] .breadcrumb ol li:last-child span:hover, [class^=vso] .breadcrumb ul li:last-child a:hover, [class^=vso] .breadcrumb ul li:last-child span:hover {
color: #ace9f1;
}
[class^=vso] .breadcrumb ol li:not(:last-child):after, [class^=vso] .breadcrumb ul li:not(:last-child):after {
color: #25c6da;
}
[class^=services] .breadcrumb ol li a, [class^=foundation] .breadcrumb ol li a, [class^=jobs] .breadcrumb ol li a, [class^=academy] .breadcrumb ol li a, [class^=services] .breadcrumb ul li a, [class^=foundation] .breadcrumb ul li a, [class^=jobs] .breadcrumb ul li a, [class^=academy] .breadcrumb ul li a {
color: #a1cee6;
}
[class^=services] .breadcrumb ol li a span, [class^=services] .breadcrumb ol li a:after, [class^=foundation] .breadcrumb ol li a span, [class^=foundation] .breadcrumb ol li a:after, [class^=jobs] .breadcrumb ol li a span, [class^=jobs] .breadcrumb ol li a:after, [class^=academy] .breadcrumb ol li a span, [class^=academy] .breadcrumb ol li a:after, [class^=services] .breadcrumb ul li a span, [class^=services] .breadcrumb ul li a:after, [class^=foundation] .breadcrumb ul li a span, [class^=foundation] .breadcrumb ul li a:after, [class^=jobs] .breadcrumb ul li a span, [class^=jobs] .breadcrumb ul li a:after, [class^=academy] .breadcrumb ul li a span, [class^=academy] .breadcrumb ul li a:after {
color: #a1cee6;
}
[class^=services] .breadcrumb ol li a:hover span, [class^=services] .breadcrumb ol li a:hover:after, [class^=foundation] .breadcrumb ol li a:hover span, [class^=foundation] .breadcrumb ol li a:hover:after, [class^=jobs] .breadcrumb ol li a:hover span, [class^=jobs] .breadcrumb ol li a:hover:after, [class^=academy] .breadcrumb ol li a:hover span, [class^=academy] .breadcrumb ol li a:hover:after, [class^=services] .breadcrumb ul li a:hover span, [class^=services] .breadcrumb ul li a:hover:after, [class^=foundation] .breadcrumb ul li a:hover span, [class^=foundation] .breadcrumb ul li a:hover:after, [class^=jobs] .breadcrumb ul li a:hover span, [class^=jobs] .breadcrumb ul li a:hover:after, [class^=academy] .breadcrumb ul li a:hover span, [class^=academy] .breadcrumb ul li a:hover:after {
color: #ddeef6;
}
[class^=services] .breadcrumb ol li:last-child a, [class^=services] .breadcrumb ol li:last-child span, [class^=foundation] .breadcrumb ol li:last-child a, [class^=foundation] .breadcrumb ol li:last-child span, [class^=jobs] .breadcrumb ol li:last-child a, [class^=jobs] .breadcrumb ol li:last-child span, [class^=academy] .breadcrumb ol li:last-child a, [class^=academy] .breadcrumb ol li:last-child span, [class^=services] .breadcrumb ul li:last-child a, [class^=services] .breadcrumb ul li:last-child span, [class^=foundation] .breadcrumb ul li:last-child a, [class^=foundation] .breadcrumb ul li:last-child span, [class^=jobs] .breadcrumb ul li:last-child a, [class^=jobs] .breadcrumb ul li:last-child span, [class^=academy] .breadcrumb ul li:last-child a, [class^=academy] .breadcrumb ul li:last-child span {
color: #b8d6e6;
}
[class^=services] .breadcrumb ol li:last-child a:hover, [class^=services] .breadcrumb ol li:last-child span:hover, [class^=foundation] .breadcrumb ol li:last-child a:hover, [class^=foundation] .breadcrumb ol li:last-child span:hover, [class^=jobs] .breadcrumb ol li:last-child a:hover, [class^=jobs] .breadcrumb ol li:last-child span:hover, [class^=academy] .breadcrumb ol li:last-child a:hover, [class^=academy] .breadcrumb ol li:last-child span:hover, [class^=services] .breadcrumb ul li:last-child a:hover, [class^=services] .breadcrumb ul li:last-child span:hover, [class^=foundation] .breadcrumb ul li:last-child a:hover, [class^=foundation] .breadcrumb ul li:last-child span:hover, [class^=jobs] .breadcrumb ul li:last-child a:hover, [class^=jobs] .breadcrumb ul li:last-child span:hover, [class^=academy] .breadcrumb ul li:last-child a:hover, [class^=academy] .breadcrumb ul li:last-child span:hover {
color: #deecf3;
}
[class^=services] .breadcrumb ol li:not(:last-child):after, [class^=foundation] .breadcrumb ol li:not(:last-child):after, [class^=jobs] .breadcrumb ol li:not(:last-child):after, [class^=academy] .breadcrumb ol li:not(:last-child):after, [class^=services] .breadcrumb ul li:not(:last-child):after, [class^=foundation] .breadcrumb ul li:not(:last-child):after, [class^=jobs] .breadcrumb ul li:not(:last-child):after, [class^=academy] .breadcrumb ul li:not(:last-child):after {
color: #a1cee6;
}
.form {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
max-width: 560px;
}
.form .form-element {
position: relative;
margin-bottom: 10px;
}
.form .form-element .error-message {
display: none;
position: absolute;
right: 0;
top: 3px;
color: darkred;
font-size: 0.75rem;
}
.form .form-element .error-message:before {
content: "* ";
font-weight: bold;
}
.form .form-element .error-message.active {
display: inline-block;
}
.form .form-element.multiple-elements {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.form .form-element.multiple-elements > * {
width: calc(50% - 20px);
}
.form .form-element.text-area {
margin-bottom: 0;
display: block;
}
.form .form-element.text-area label {
margin-top: 15px;
}
.form .form-element.select-element {
position: relative;
}
.form .form-element.select-element span {
background-image: url("/img/down.png");
width: 16px;
height: 16px;
background-size: contain;
display: inline-block;
position: absolute;
right: 10px;
top: 25px;
pointer-events: none;
}
.form .form-element.select-element select {
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-spec-appearance: none;
appearance: none;
outline: none;
height: 45px;
width: 100%;
font-size: 15px;
line-height: 16px;
font-weight: 500;
background-color: #f3f3f3;
color: #1d1d1d;
padding: 0 30px 0 20px;
border: 1.5px transparent solid;
}
.form .form-element.select-element .selectric-wrapper {
margin-top: 10px;
width: 100%;
display: inline-block;
}
.form .form-element.select-element .selectric-items li {
padding-left: 20px;
padding-right: 20px;
font-size: 15px;
line-height: 16px;
font-weight: 500;
}
.form .form-element.select-element .selectric {
background-color: #f3f3f3;
}
.form .form-element.select-element .selectric .label {
padding: 0 20px 0 10px;
font-size: 15px;
line-height: 16px;
font-weight: 500;
color: #1d1d1d;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.form .form-element label {
width: 100%;
display: block;
color: #98a0b3;
}
.form .form-element input, .form .form-element textarea {
margin-top: 0px;
height: 45px;
width: 100%;
margin-left: 0;
background-color: white;
color: #0f46a1;
padding: 0 20px;
border: 1.5px #b6bae2 solid;
font-size: 0.8rem;
}
[class^=vso] .form .form-element input, [class^=vso] .form .form-element textarea {
color: #0098a6;
}
.form .form-element input.alert, .form .form-element textarea.alert {
border-color: #ff1e00;
}
.form .form-element input:-webkit-autofill, .form .form-element input:-webkit-autofill:hover, .form .form-element input:-webkit-autofill:focus, .form .form-element input:-webkit-autofill:active, .form .form-element textarea:-webkit-autofill, .form .form-element textarea:-webkit-autofill:hover, .form .form-element textarea:-webkit-autofill:focus, .form .form-element textarea:-webkit-autofill:active {
transition: 9999s background-color;
-webkit-text-fill-color: #0f46a1;
transition-delay: 9999s;
}
.form .form-element textarea {
height: 152px;
padding-top: 15px;
padding-bottom: 10px;
resize: vertical;
margin-left: 0;
font-weight: 500;
display: block;
}
.form .submit {
margin-top: 45px;
background-color: #4fc2f8;
border-radius: 26px;
max-width: 210px;
cursor: pointer;
transition: background-color 0.3s;
}
[class^=vso] .form .submit {
background-color: #25c6da;
}
[class^=vso] .form .submit:hover {
background-color: #0098a6;
}
.form .submit p {
font-size: 1rem;
line-height: 1;
font-weight: 700;
color: white;
padding: 16px 30px;
}
.form .submit p:after {
content: "";
display: inline-block;
margin-left: 25px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.form .submit:hover {
background-color: #0f46a1;
}
.form .submit:hover p:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.form .submit input {
display: none;
border: 1.5px transparent solid;
font-size: 15px;
line-height: 15px;
width: 100%;
max-width: 300px;
background: #4fc2f8;
color: white;
padding: 15px 0;
cursor: pointer;
}
.form .submit input:hover {
background: #36baf7;
}
.form input:focus, .form textarea:focus {
box-shadow: none;
outline: none;
}
@media screen and (max-width: 800pxpx) {
.form .form-element {
margin-bottom: 30px;
}
.form .form-element.text-area {
display: block;
}
.form .form-element.select-element {
display: block;
}
.form .form-element.select-element select {
width: 100%;
}
.form .form-element.select-element .selectric-wrapper {
width: 100%;
display: block;
}
.form .form-element label {
display: block;
width: 100%;
padding-left: 20px;
}
.form .form-element input, .form .form-element textarea {
width: 100%;
margin-left: 0;
}
}
/*==========================================================================
* Footer
* ========================================================================== */
footer {
background-color: #212633;
padding-top: 50px;
/* Sub footer for pay off and our branding
* ========================================================================== */
}
footer .grid-col {
vertical-align: top;
}
footer .main-item {
width: 20.8333333333%;
padding-bottom: 50px;
}
footer .main-item.schools {
padding-right: 25px;
}
footer .main-item > a {
padding: 10px 20px;
border: 1px solid #9ea8db;
border-radius: 20px;
color: #9ea8db;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
}
footer .main-item > a span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -162px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 3px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
footer .main-item > a:hover {
color: white;
}
footer .main-item > a:hover span {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
@media screen and (max-width: 1300px) {
footer .main-item {
width: 42.8571428571%;
}
footer .main-item.schools {
margin-left: 8.3333333333%;
}
}
footer h5 {
font-size: 0.9rem;
color: #f06292;
}
footer ul {
list-style: none;
padding: 0;
margin: 30px 0 0;
font-size: 0.9rem;
}
@media screen and (max-width: 600px) {
footer ul {
margin-bottom: 50px;
}
}
footer ul li {
color: #9ea8db;
}
footer ul li.margin-top {
margin-top: 1rem;
}
footer ul li a {
color: #9ea8db;
text-decoration: none;
}
footer ul li a:hover {
color: white;
}
footer ul li.active, footer ul li.active a {
color: #c5caea;
font-weight: 700;
}
footer .cta {
width: 20.8333333333%;
padding-bottom: 40px;
}
@media screen and (max-width: 1300px) {
footer .cta {
width: 42.8571428571%;
}
}
footer .cta .logo span {
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px 0 no-repeat;
background-size: 502px 423px;
width: 100px;
height: 77px;
}
@media screen and (max-width: 1750px) {
footer .cta .logo span {
margin-left: auto;
}
}
footer .cta .text {
margin: 30px 0 25px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
footer .cta .text figure {
height: 100px;
width: 100px;
background-image: url("/img/cta-footer.jpg");
background-position: center;
background-size: cover;
border-radius: 100%;
}
[class^=vso] footer .cta .text figure {
background-image: url("/img/cta-footer-1.jpg");
}
footer .cta .text .placeholder {
width: calc(100% - 120px);
}
footer .cta .text p {
font-size: 0.9rem;
line-height: 1.2;
color: #9ea8db;
margin: 0 0 10px;
}
footer .cta .text a {
color: white;
font-size: 1.1rem;
text-decoration: none;
}
footer .cta .text a span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -167px -102px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 16px;
display: inline-block;
margin-right: 5px;
}
@media screen and (max-width: 1750px) {
footer .cta .text {
display: block;
}
footer .cta .text figure {
margin: 0 0 10px 40px;
}
footer .cta .text .placeholder {
width: 100%;
}
footer .cta .text .placeholder p {
max-width: 200px;
}
}
[class^=vso] footer {
background-color: #2a3040;
}
[class^=vso] footer h5 {
color: #4fc2f8;
}
[class^=vso] footer .cta .logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -205px no-repeat;
background-size: 502px 423px;
width: 100px;
height: 77px;
position: relative;
}
[class^=vso] footer .cta .logo span:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 8px;
background-color: #2a3040;
}
[class^=services] footer, [class^=foundation] footer, [class^=jobs] footer, [class^=academy] footer {
background-color: #2a3040;
}
[class^=services] footer h5, [class^=foundation] footer h5, [class^=jobs] footer h5, [class^=academy] footer h5 {
color: #78a0b4;
}
[class^=services] footer .cta .logo span, [class^=foundation] footer .cta .logo span, [class^=jobs] footer .cta .logo span, [class^=academy] footer .cta .logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -315px -225px no-repeat;
background-size: 502px 423px;
width: 100px;
height: 77px;
}
.global footer {
background-color: #2a3040;
}
.global footer .main-item > a {
border: 1px solid #98a0b3;
color: #98a0b3;
}
.global footer .main-item > a span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
opacity: 0.5;
}
.global footer .main-item > a:hover {
color: white;
}
.global footer h5 {
color: #78a0b4;
}
.global footer ul li {
color: #98a0b3;
}
.global footer ul li a {
color: #98a0b3;
}
.global footer ul li a:hover {
color: white;
}
.global footer ul li.active {
color: #c3cde6;
font-weight: 400;
}
.global footer ul li.active a {
color: #c3cde6;
font-weight: 400;
}
.global footer .cta .logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -285px no-repeat;
background-size: 502px 423px;
width: 100px;
height: 77px;
}
.global footer .cta .text p {
color: #98a0b3;
}
.global.home footer .cta .logo span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -315px -225px no-repeat;
background-size: 502px 423px;
width: 100px;
height: 77px;
}
footer .sub-footer {
background-color: #323a4d;
height: 55px;
padding: 15px 0;
}
footer .sub-footer .grid-col {
font-size: 0.9rem;
}
footer .sub-footer .pay-off {
margin-top: 0;
margin-bottom: 0;
color: #566699;
}
footer .sub-footer a {
position: relative;
top: -1px;
color: #566699;
text-align: right;
text-decoration: none;
}
footer .sub-footer a:hover {
color: #6c7bac;
}
footer .sub-footer a:hover:before {
transform: rotate(360deg);
}
footer .sub-footer a:before {
content: "";
position: absolute;
top: 1px;
right: 180px;
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -78px no-repeat;
background-size: 502px 423px;
width: 24px;
height: 24px;
transform: rotate(0deg);
transition: all 0.5s;
}
@media screen and (max-width: 1080px) {
footer .sub-footer a {
top: 0;
}
footer .sub-footer a:before {
top: 0;
right: 158px;
}
}
@media screen and (max-width: 840px) {
footer .sub-footer .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
footer .sub-footer .grid-row .grid-col {
margin-left: 0;
}
}
@media screen and (max-width: 600px) {
footer .sub-footer {
height: auto;
padding: 0;
}
footer .sub-footer .grid-row {
display: block;
width: 100%;
}
footer .sub-footer .pay-off, footer .sub-footer .komma {
padding: 15px 7.1428571429%;
width: 100%;
text-align: center;
}
footer .sub-footer .komma {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
line-height: 1;
background-color: rgba(255, 255, 255, 0.05);
}
footer .sub-footer .komma:before {
position: relative;
right: 0;
margin-left: -18px;
left: -10px;
top: 0;
}
}
[class^=vso] footer .sub-footer {
background-color: #323a4d;
}
[class^=vso] footer .sub-footer .pay-off {
color: #536080;
}
[class^=vso] footer .sub-footer a {
color: #536080;
}
[class^=vso] footer .sub-footer a:hover {
color: white;
}
[class^=vso] footer .sub-footer a:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -103px no-repeat;
background-size: 502px 423px;
width: 24px;
height: 24px;
}
.global footer .sub-footer .pay-off {
color: #98a0b3;
}
.global footer .sub-footer a {
color: #98a0b3;
}
.global footer .sub-footer a:hover {
color: white;
}
.global footer .sub-footer a:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -149px -128px no-repeat;
background-size: 502px 423px;
width: 24px;
height: 24px;
}
@media screen and (max-width: 840px) {
footer {
padding-top: 35px;
}
footer > .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin-bottom: 100px;
width: 100%;
}
footer .main-item {
width: 100%;
padding: 0 7.1428571429%;
margin-left: auto;
margin-right: auto;
}
footer .main-item .logo {
display: none;
}
footer .main-item.location {
-webkit-order: 2;
-ms-order: 2;
order: 2;
border-top: 2px solid rgba(152, 160, 179, 0.2);
padding-top: 40px;
}
footer .main-item.schools, footer .main-item.menu {
display: none;
}
footer .main-item > a {
display: inline-block;
}
footer .main-item ul.extra-margin-bellow {
margin-bottom: 35px;
}
footer .cta {
width: 85.7142857143%;
margin-left: auto;
margin-right: auto;
padding-bottom: 0;
-webkit-order: 1;
-ms-order: 1;
order: 1;
}
footer .cta .text {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
footer .cta .text a {
font-size: 1rem;
}
footer .cta .text figure {
margin: 0;
}
footer .cta .text .placeholder {
width: calc(100% - 118px);
}
footer .cta .logo {
display: none;
}
}
.pagination {
text-align: right;
}
.pagination ul {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}
.pagination ul li {
display: inline-block;
float: left;
margin: 0 6px;
}
.pagination ul li a {
color: #4fc2f8;
text-decoration: none;
}
.pagination ul li.active {
color: #0f46a1;
}
.pagination ul li.disabled {
opacity: 0.3;
}
.pagination ul li:first-of-type span, .pagination ul li:last-of-type span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -134px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
-spec-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
transition: transform 0.3s;
}
.pagination ul li:first-of-type:hover span, .pagination ul li:last-of-type:hover span {
-webkit-transform: translate3d(3px, 0, 0) rotate(0deg);
-moz-transform: translate3d(3px, 0, 0) rotate(0deg);
-ms-transform: translate3d(3px, 0, 0) rotate(0deg);
-o-transform: translate3d(3px, 0, 0) rotate(0deg);
-spec-transform: translate3d(3px, 0, 0) rotate(0deg);
transform: translate3d(3px, 0, 0) rotate(0deg);
}
.pagination ul li:first-of-type.disabled span, .pagination ul li:last-of-type.disabled span {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
-spec-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
.pagination ul li:first-of-type span {
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
}
.pagination ul li:first-of-type:hover span {
-webkit-transform: translate3d(-3px, 0, 0) rotate(180deg);
-moz-transform: translate3d(-3px, 0, 0) rotate(180deg);
-ms-transform: translate3d(-3px, 0, 0) rotate(180deg);
-o-transform: translate3d(-3px, 0, 0) rotate(180deg);
-spec-transform: translate3d(-3px, 0, 0) rotate(180deg);
transform: translate3d(-3px, 0, 0) rotate(180deg);
}
.pagination ul li:first-of-type.disabled span {
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
}
.preventScroll {
overflow: hidden;
overflow-y: scroll;
position: fixed;
width: 100%;
}
.mobile-navigation {
position: fixed;
z-index: 1000;
height: 100vh;
display: none;
overflow: hidden;
width: 100%;
left: 0;
top: 0;
pointer-events: none;
}
.mobile-navigation .bar {
height: 60px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11);
pointer-events: all;
position: relative;
z-index: 4;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
transition-delay: 0.4s;
background-image: url("/img/forest_top_view.jpg");
background-position: bottom right;
background-size: cover;
}
[class^=vso] .mobile-navigation .bar {
background-image: url("/img/forest_top_view_green.jpg");
}
[class^=services] .mobile-navigation .bar, [class^=foundation] .mobile-navigation .bar, [class^=academy] .mobile-navigation .bar, .global .mobile-navigation .bar {
background-image: url("/img/forest_top_view_grey.jpg");
}
.mobile-navigation .bar .toggle-menu {
width: 60px;
height: 100%;
z-index: 3;
border: rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.mobile-navigation .bar .toggle-menu .icon span {
position: relative;
width: 25px;
height: 3px;
margin-bottom: 3px;
background-color: white;
border-radius: 9999px;
display: block;
transition: all 0.3s;
}
.mobile-navigation .bar .toggle-menu .icon span:last-of-type {
margin-bottom: 0;
width: 17px;
bottom: 0;
}
.mobile-navigation .bar .toggle-menu .icon span:first-of-type {
top: 0;
}
.mobile-navigation .bar .toggle-menu:hover .icon span:last-of-type {
width: 25px;
}
.mobile-navigation .bar .logo {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.mobile-navigation .bar .logo a {
position: relative;
top: -3px;
width: calc(100% - 140px);
height: 50%;
display: inline-block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url("/img/mobile-so-logo.svg");
}
[class^=vso] .mobile-navigation .bar .logo a {
background-image: url("/img/mobile-vso-logo.svg");
}
[class^=services] .mobile-navigation .bar .logo a, [class^=foundation] .mobile-navigation .bar .logo a, [class^=academy] .mobile-navigation .bar .logo a, .global .mobile-navigation .bar .logo a {
background-image: url("/img/mobile-service-logo.svg");
}
.mobile-navigation .bar .contact-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
z-index: 5;
}
.mobile-navigation .bar .contact-button a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 100%;
}
.mobile-navigation .bar .contact-button a:before {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -99px -397px no-repeat;
background-size: 502px 423px;
width: 23px;
height: 25px;
display: inline-block;
}
.mobile-navigation .shader {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #0f46a1;
opacity: 0;
transition-delay: 0.4s;
}
[class^=vso] .mobile-navigation .shader {
background-color: #0098a6;
}
.mobile-navigation .menu {
height: calc(100% - 60px);
width: 80%;
left: 0;
top: 60px;
background-color: #0f46a1;
min-width: 275px;
position: absolute;
overflow-x: auto;
pointer-events: all;
z-index: 5;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-spec-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
[class^=vso] .mobile-navigation .menu {
background-color: #0098a6;
}
[class^=services] .mobile-navigation .menu, [class^=foundation] .mobile-navigation .menu, [class^=jobs] .mobile-navigation .menu, [class^=academy] .mobile-navigation .menu {
background-color: #78a0b4;
}
@media screen and (max-width: 500px) {
.mobile-navigation .menu {
width: 90%;
}
}
.mobile-navigation .menu .office {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding-left: 60px;
height: 85px;
}
.mobile-navigation .menu .office a {
color: #1d88e6;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
}
[class^=vso] .mobile-navigation .menu .office a {
color: #6be9f2;
}
[class^=services] .mobile-navigation .menu .office a, [class^=foundation] .mobile-navigation .menu .office a, [class^=jobs] .mobile-navigation .menu .office a, [class^=academy] .mobile-navigation .menu .office a {
color: #a1cee6;
}
.mobile-navigation .menu .office:before {
content: "";
position: relative;
top: 1px;
display: inline-block;
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
[class^=vso] .mobile-navigation .menu .office:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -131px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
[class^=services] .mobile-navigation .menu .office:before, [class^=foundation] .mobile-navigation .menu .office:before, [class^=jobs] .mobile-navigation .menu .office:before, [class^=academy] .mobile-navigation .menu .office:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -131px -155px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 17px;
}
.mobile-navigation .root-links {
padding-left: 60px;
}
.mobile-navigation .root-links a {
text-decoration: none;
display: block;
}
.mobile-navigation .root-links .home-link {
font-weight: 600;
color: white;
font-size: 1.4rem;
}
@media screen and (max-width: 450px) {
.mobile-navigation .root-links .home-link {
font-size: 1.3rem;
}
}
.mobile-navigation .root-links .home-link strong {
font-weight: 600;
color: #4fc2f8;
}
[class^=vso] .mobile-navigation .root-links .home-link {
color: #80deea;
}
[class^=vso] .mobile-navigation .root-links .home-link strong {
color: #25c6da;
}
[class^=services] .mobile-navigation .root-links .home-link, [class^=foundation] .mobile-navigation .root-links .home-link, [class^=jobs] .mobile-navigation .root-links .home-link, [class^=academy] .mobile-navigation .root-links .home-link {
color: #a1cee6;
}
[class^=services] .mobile-navigation .root-links .home-link strong, [class^=foundation] .mobile-navigation .root-links .home-link strong, [class^=jobs] .mobile-navigation .root-links .home-link strong, [class^=academy] .mobile-navigation .root-links .home-link strong {
color: #a1cee6;
}
.mobile-navigation .root-links .root-link {
color: #4fc2f8;
font-size: 1rem;
line-height: 1.2;
opacity: 0.6;
margin-top: 10px;
}
.mobile-navigation .root-links .root-link:before {
content: "";
display: inline-block;
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -148px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
}
[class^=vso] .mobile-navigation .root-links .root-link {
color: #25c6da;
opacity: 0.8;
}
[class^=services] .mobile-navigation .root-links .root-link, [class^=foundation] .mobile-navigation .root-links .root-link, [class^=jobs] .mobile-navigation .root-links .root-link, [class^=academy] .mobile-navigation .root-links .root-link {
color: #a1cee6;
opacity: 0.8;
}
[class^=services] .mobile-navigation .root-links .root-link:before, [class^=foundation] .mobile-navigation .root-links .root-link:before, [class^=jobs] .mobile-navigation .root-links .root-link:before, [class^=academy] .mobile-navigation .root-links .root-link:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
opacity: 0.4;
}
@media screen and (max-width: 450px) {
.mobile-navigation .root-links .root-link {
position: relative;
font-size: 0.9rem;
}
.mobile-navigation .root-links .root-link:before {
position: absolute;
left: -25px;
top: 3px;
margin-right: 0;
}
}
.mobile-navigation nav {
margin-top: 50px;
padding: 0 10px 80px 60px;
}
.mobile-navigation nav h3 {
font-size: 1.3rem;
color: white;
}
.mobile-navigation nav ul {
padding: 0;
list-style: none;
font-size: 1.3rem;
}
.mobile-navigation nav ul.locations {
margin-bottom: 45px;
}
.mobile-navigation nav ul.locations, .mobile-navigation nav ul.business {
margin-top: 5px;
}
.mobile-navigation nav ul li {
margin-bottom: 4px;
}
.mobile-navigation nav ul li a, .mobile-navigation nav ul li span {
color: #c5caea;
position: relative;
display: inline-block;
text-decoration: none;
transition: color 0.2s;
cursor: pointer;
}
[class^=vso] .mobile-navigation nav ul li a, [class^=vso] .mobile-navigation nav ul li span {
color: #6be9f2;
}
[class^=services] .mobile-navigation nav ul li a, [class^=foundation] .mobile-navigation nav ul li a, [class^=jobs] .mobile-navigation nav ul li a, [class^=academy] .mobile-navigation nav ul li a, [class^=services] .mobile-navigation nav ul li span, [class^=foundation] .mobile-navigation nav ul li span, [class^=jobs] .mobile-navigation nav ul li span, [class^=academy] .mobile-navigation nav ul li span {
color: #a1cee6;
}
.mobile-navigation nav ul li > ul {
padding-left: 20px;
font-size: 0.85em;
overflow: hidden;
opacity: 1;
transition: height 0.5s, opacity 0.2s;
}
.mobile-navigation nav ul li > ul.hide {
height: 0 !important;
opacity: 0;
}
.mobile-navigation nav ul li > ul.noTrans {
transition: height 0s;
opacity: 0;
}
.mobile-navigation nav ul li > ul li a {
color: #4fc2f8;
}
[class^=vso] .mobile-navigation nav ul li > ul li a {
color: #25c6da;
}
[class^=services] .mobile-navigation nav ul li > ul li a, [class^=foundation] .mobile-navigation nav ul li > ul li a, [class^=jobs] .mobile-navigation nav ul li > ul li a, [class^=academy] .mobile-navigation nav ul li > ul li a {
color: #b8d6e6;
}
.mobile-navigation nav ul li > ul li a:before {
content: "›";
}
.mobile-navigation nav ul li > ul li.active a {
color: #ffb200 !important;
}
.mobile-navigation nav ul li.active a, .mobile-navigation nav ul li.active span {
color: white;
}
.mobile-navigation nav ul li.active > ul li a {
color: #4fc2f8;
}
[class^=vso] .mobile-navigation nav ul li.active > ul li a {
color: #25c6da;
}
[class^=services] .mobile-navigation nav ul li.active > ul li a, [class^=foundation] .mobile-navigation nav ul li.active > ul li a, [class^=jobs] .mobile-navigation nav ul li.active > ul li a, [class^=academy] .mobile-navigation nav ul li.active > ul li a {
color: #b8d6e6;
}
.mobile-navigation.active .bar .toggle-menu {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-navigation.active .bar .toggle-menu .icon span {
opacity: 0;
transition-delay: 0.4s;
}
.mobile-navigation.active .bar .toggle-menu .icon span:first-of-type {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-spec-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
top: 6px;
}
.mobile-navigation.active .bar .toggle-menu .icon span:last-of-type {
width: 25px;
opacity: 1;
bottom: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-spec-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mobile-navigation.active .menu {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mobile-navigation.shader-active .shader {
opacity: 0.4;
pointer-events: all;
}
.mobile-navigation.allow-animation .shader {
transition: all 0.2s;
}
.mobile-navigation.allow-animation .menu {
transition: all 0.3s;
transition-timing-function: ease-in-out;
}
@media screen and (max-width: 840px) {
.mobile-navigation {
display: block;
}
.mobile-navigation header {
height: 60px;
visibility: hidden;
overflow: hidden;
}
.mobile-navigation .sticky-header, .mobile-navigation .sticky-header.show {
display: none;
}
.mobile-navigation .mobile-navigation {
display: block;
}
}
@media screen and (max-width: 400px) {
.mobile-navigation nav {
padding-left: 30px;
}
.mobile-navigation nav ul {
font-size: 1.2rem;
}
.mobile-navigation .root-links {
padding-left: 30px;
}
.mobile-navigation .root-links .root-link {
margin-left: 26px;
}
.mobile-navigation .menu .office {
padding-left: 30px;
}
}
.footer-link-block {
display: none;
position: relative;
font-size: 1.3rem;
line-height: 1.6;
letter-spacing: 0.4px;
background-color: black;
}
.footer-link-block:last-child {
margin-right: 0;
}
.footer-link-block .placeholder {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
height: 100%;
padding: 35px 8.3333333333%;
text-decoration: none;
}
.footer-link-block .placeholder figure {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 60px;
height: 60px;
margin-right: 20px;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.1);
}
.footer-link-block .placeholder figure:before {
content: "";
display: block;
}
.footer-link-block .placeholder h4 {
margin: 0;
font-size: 1rem;
line-height: 1.4;
color: white;
opacity: 0.8;
}
.footer-link-block .placeholder p {
margin: 0;
font-size: 0.85rem;
font-style: italic;
color: white;
}
.footer-link-block .placeholder span {
position: absolute;
top: calc(50% - 5px);
right: 8.3333333333%;
display: inline-block;
margin-left: 20px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.footer-link-block .placeholder:hover span {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.footer-link-block.new-zuiderbos {
background-color: #f06292;
}
.footer-link-block.new-zuiderbos .placeholder figure {
background-color: #f48eb1;
}
.footer-link-block.new-zuiderbos .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -122px -128px no-repeat;
background-size: 502px 423px;
width: 27px;
height: 26px;
}
.footer-link-block.latest-news {
background-color: #0f46a1;
}
.footer-link-block.latest-news .placeholder figure {
background-color: #2196f3;
}
.footer-link-block.latest-news .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -128px no-repeat;
background-size: 502px 423px;
width: 26px;
height: 26px;
}
.footer-link-block.faq {
background-color: #ffb200;
}
.footer-link-block.faq .placeholder figure {
background-color: #ffc928;
}
.footer-link-block.faq .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -174px -128px no-repeat;
background-size: 502px 423px;
width: 12px;
height: 24px;
}
.footer-link-block.guide {
background-color: #2196f3;
}
.footer-link-block.guide .placeholder figure {
background-color: #51adf6;
}
.footer-link-block.guide .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -128px no-repeat;
background-size: 502px 423px;
width: 26px;
height: 26px;
}
.footer-link-block.organisation {
background-color: #add582;
}
.footer-link-block.organisation .placeholder figure {
background-color: #9bbf75;
}
.footer-link-block.organisation .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -122px -128px no-repeat;
background-size: 502px 423px;
width: 27px;
height: 26px;
}
.footer-link-block.academy, .footer-link-block.identity-course {
background-color: #78a0b4;
}
.footer-link-block.academy .placeholder figure, .footer-link-block.identity-course .placeholder figure {
background-color: #4e7f99;
}
.footer-link-block.academy .placeholder figure:before, .footer-link-block.identity-course .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -167px -390px no-repeat;
background-size: 502px 423px;
width: 28px;
height: 25px;
}
.footer-link-block.education {
background-color: #add582;
}
.footer-link-block.education .placeholder figure {
background-color: #9bbf75;
}
.footer-link-block.education .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -135px -400px no-repeat;
background-size: 502px 423px;
width: 28px;
height: 16px;
}
.footer-link-block.documentation {
background-color: #4e7f99;
}
.footer-link-block.documentation .placeholder figure {
background-color: #78a0b4;
}
[class^=vso] .footer-link-block.new-zuiderbos {
background-color: #0098a6;
}
[class^=vso] .footer-link-block.new-zuiderbos .placeholder figure {
background-color: #25c6da;
}
[class^=vso] .footer-link-block.latest-news {
background-color: #4fc2f8;
}
[class^=vso] .footer-link-block.latest-news .placeholder figure {
background-color: #80d6ff;
}
@media screen and (max-width: 840px) {
.footer-link-block {
display: block;
}
}
.mobile-contact {
display: none;
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
-spec-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
padding: 50px 7.1428571429%;
background-color: white;
color: #737373;
font-size: 0.9rem;
transition: opacity 0.4s, transform 0.4s;
}
.mobile-contact.active {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: all;
}
.mobile-contact h1, .mobile-contact h2 {
font-size: 2rem;
line-height: 1.2;
max-width: 580px;
color: #0f46a1;
margin: 0 0 40px;
}
.mobile-contact p {
margin: 1rem 0;
}
.mobile-contact strong {
color: #333;
}
.mobile-contact a:not(.button) {
color: #1d88e6;
text-decoration: none;
transition: color 0.3s, border 0.3s, opacity 0.3s;
}
.mobile-contact a:not(.button):hover {
color: #1260a4;
}
[class^=vso] .mobile-contact a:not(.button) {
color: #25c6da;
}
[class^=vso] .mobile-contact a:not(.button):hover {
color: #1e9eae;
}
.mobile-contact .faq {
margin-top: 60px;
}
.mobile-contact a.button {
display: inline-block;
margin-top: 20px;
padding: 15px 20px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.mobile-contact a.button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.mobile-contact a.button:hover {
background-color: #ffa200;
}
.mobile-contact a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .mobile-contact a.button {
background-color: #25c6da;
}
[class^=vso] .mobile-contact a.button:hover {
background-color: #0098a6;
}
@media screen and (max-width: 840px) {
.mobile-contact {
display: block;
}
}
/*==========================================================================
* Dynamic Blocks
* ========================================================================== */
.dynamic-block .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.dynamic-block .content {
font-size: 0.9rem;
line-height: 1.6;
}
.dynamic-block .content h2 {
font-size: 1.2rem;
color: #0f46a1;
margin: 0 0 40px;
}
[class^=vso] .dynamic-block .content h2 {
color: #0098a6;
}
[class^=services] .dynamic-block .content h2, [class^=foundation] .dynamic-block .content h2, [class^=jobs] .dynamic-block .content h2, [class^=academy] .dynamic-block .content h2 {
color: #4e7f99;
}
.dynamic-block .content ul, .dynamic-block .content ol {
padding-left: 20px;
list-style: none;
}
.dynamic-block .content ul li, .dynamic-block .content ol li {
position: relative;
padding-left: 20px;
color: rgba(115, 115, 115, 0.8);
}
.dynamic-block .content ul li:before, .dynamic-block .content ol li:before {
content: "•";
position: absolute;
color: #0f46a1;
font-size: 1.2rem;
line-height: 1;
left: -20px;
}
[class^=vso] .dynamic-block .content ul li:before, [class^=vso] .dynamic-block .content ol li:before {
color: #0098a6;
}
.dynamic-block .content ol {
counter-reset: ol-counter;
}
.dynamic-block .content ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 2px;
}
.dynamic-block .content p {
color: #737373;
}
.dynamic-block .content p:first-of-type {
margin-top: 0;
}
.dynamic-block .content p:last-of-type {
margin-bottom: 0;
}
.dynamic-block .content p strong {
color: #333;
}
.dynamic-block .content p a {
color: #333;
text-decoration: none;
border-bottom: 2px solid #333;
transition: color 0.3s, border 0.3s, opacity 0.3s;
}
.dynamic-block .content p a:hover {
color: black;
border-bottom-color: #0d0d0d;
}
.dynamic-block .content.white h2 {
color: rgba(255, 255, 255, 0.8);
}
.dynamic-block .content.white ul li, .dynamic-block .content.white ol li {
color: rgba(255, 255, 255, 0.8);
}
.dynamic-block .content.white ul li:before, .dynamic-block .content.white ol li:before {
color: white;
}
.dynamic-block .content.white p {
color: rgba(255, 255, 255, 0.8);
}
.dynamic-block .content.white p strong {
color: white;
}
.dynamic-block .content.white p a {
color: white;
border-bottom-color: white;
}
.dynamic-block .content.white p a:hover {
opacity: 0.6;
}
[class^=vso] .dynamic-block .content.white h2 {
color: #0098a6;
}
[class^=vso] .dynamic-block .content.white p {
color: white;
}
.dynamic-block a.button {
display: inline-block;
margin-top: 50px;
padding: 15px 20px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.dynamic-block a.button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.dynamic-block a.button:hover {
background-color: #ffa200;
}
.dynamic-block a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .dynamic-block a.button {
background-color: #25c6da;
}
[class^=vso] .dynamic-block a.button:hover {
background-color: #0098a6;
}
.content-block .grid-row {
position: relative;
}
.content-block .image {
position: absolute;
height: 100%;
}
.content-block .image span {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.content-block .image .medium {
display: none;
}
.content-block .content {
padding: 100px 8.3333333333%;
}
.content-block[data-size-type="33"] {
padding: 60px 0;
}
.content-block[data-size-type="33"] .image {
width: 58.3333333333%;
position: relative;
}
.content-block[data-size-type="33"] .image img {
width: 100%;
}
.content-block[data-size-type="33"] .content {
padding-top: 0;
padding-bottom: 0;
width: 41.6666666667%;
margin-left: 0;
}
.content-block[data-size-type="50"] .image {
top: 0;
width: 41.6666666667%;
left: 8.3333333333%;
}
.content-block[data-size-type="50"] .content {
width: 50%;
margin-left: 50%;
}
.content-block[data-size-type="66"] {
background-color: #1d88e6;
}
[class^=vso] .content-block[data-size-type="66"] {
background-color: #80deea;
}
[class^=services] .content-block[data-size-type="66"], [class^=foundation] .content-block[data-size-type="66"], [class^=jobs] .content-block[data-size-type="66"], [class^=academy] .content-block[data-size-type="66"] {
background-color: #4e7f99;
}
.content-block[data-size-type="66"] .image {
top: 0;
width: 41.6666666667%;
left: -8.3333333333%;
}
.content-block[data-size-type="66"] .content {
width: 50%;
margin-right: 8.3333333333%;
margin-left: 41.6666666667%;
}
.content-block[data-image-location=right] .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.content-block[data-image-location=right] .content {
-webkit-order: 1;
-ms-order: 1;
order: 1;
margin-left: 0;
}
.content-block[data-image-location=right] .image {
-webkit-order: 2;
-ms-order: 2;
order: 2;
top: 0;
right: 8.3333333333%;
left: auto;
}
.content-block[data-image-location=right][data-size-type="33"] .image {
right: 0;
}
.content-block[data-image-location=right][data-size-type="66"] .content {
margin-left: 0;
}
.content-block[data-image-location=right][data-size-type="66"] .image {
right: -8.3333333333%;
}
@media screen and (max-width: 1366px) {
.content-block .image {
left: 0;
width: 50%;
}
.content-block .content {
width: 50%;
margin-right: 0;
margin-left: 50%;
padding: 60px 8.3333333333%;
}
.content-block[data-image-location=right] .content {
margin-left: 0;
margin-right: 0;
}
.content-block[data-image-location=right] .image {
right: 0;
}
}
@media screen and (max-width: 1000px) {
.content-block[data-size-type="66"] .content {
width: 58.3333333333%;
margin-right: 0;
}
.content-block[data-size-type="50"] .content {
width: 58.3333333333%;
}
.content-block[data-size-type="33"] .content {
padding-right: 0;
}
.content-block[data-size-type="33"][data-image-location=right] .image {
width: 50%;
}
}
@media screen and (max-width: 840px) {
.content-block .grid-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
}
.content-block .image {
position: relative;
width: 100% !important;
-webkit-order: 2;
-ms-order: 2;
order: 2;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
margin-top: 60px;
}
.content-block .content {
-webkit-order: 1;
-ms-order: 1;
order: 1;
width: 85.7142857143% !important;
margin: 0 auto !important;
padding: 50px 0;
font-size: 1rem;
}
}
.full-text-block {
background-image: url("/img/forest_top_view.jpg");
background-position: right bottom;
background-size: cover;
}
.full-text-block .grid-row {
position: relative;
display: block;
padding: 80px 0 80px;
text-align: center;
}
.full-text-block .text {
max-width: 680px;
margin: auto;
text-align: center;
font-size: 1.2rem;
}
.full-text-block .text ul li:before, .full-text-block .text ol li:before {
position: relative;
left: 0;
margin-left: -45px;
margin-right: 10px;
}
.full-text-block a.button {
margin-top: 60px;
}
.full-text-block .icon {
display: inline-block;
position: absolute;
left: -30px;
top: -60px;
width: 60px;
height: 212px;
}
.full-text-block .icon:after {
content: "";
display: block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
[class^=vso] .full-text-block {
background-image: url("/img/forest_top_view_green.jpg");
}
[class^=services] .full-text-block, [class^=foundation] .full-text-block, [class^=jobs] .full-text-block, [class^=academy] .full-text-block {
background-image: url("/img/forest_top_view_grey.jpg");
}
@media screen and (max-width: 840px) {
.full-text-block .grid-row {
padding: 50px 0;
text-align: left;
}
.full-text-block .text {
text-align: left;
font-size: 1rem;
}
.full-text-block a.button {
margin-top: 30px;
}
.full-text-block .icon {
display: none;
}
}
.full-text-block + .full-text-block .icon {
display: none;
}
/*==========================================================================
* Calender block - Home
* ========================================================================== */
.calender {
background-color: white;
position: relative;
top: -60px;
overflow: visible;
/* Header
* ========================================================================== */
/* Calender items
* ========================================================================== */
/* Footer link
* ========================================================================== */
}
.calender a {
text-decoration: none;
}
.calender h3 {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 60px;
width: 100%;
background-color: #f06292;
padding: 0 100px 0 30px;
font-size: 1.05rem;
line-height: 1;
font-weight: 700;
color: white;
}
.calender h3 span {
position: absolute;
top: 0;
left: -60px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 60px;
width: 60px;
background-color: #eb407a;
}
.calender h3 span:before {
content: "";
display: block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -141px -102px no-repeat;
background-size: 502px 423px;
width: 25px;
height: 25px;
}
.calender h3 .all-items {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
.calender h3 .all-items .all-items__arrow {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.calender h3 .all-items .all-items__text {
text-transform: uppercase;
font-size: 0.6rem;
}
.calender h3 .all-items:hover .all-items__arrow {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .calender h3 {
background-color: #4fc2f8;
}
[class^=vso] .calender h3 span {
background-color: #80d6ff;
}
.calender ul {
list-style: none;
padding: 0;
margin: 0;
}
.calender ul li {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
min-height: 100px;
border-bottom: 1px solid #e5e5e5;
}
.calender ul li .date {
position: relative;
width: 115px;
padding-right: 30px;
margin-left: 10px;
font-size: 3rem;
line-height: 1;
text-align: right;
color: #0f46a1;
font-weight: 700;
font-family: "Dubai", "Arial", monospace;
}
.calender ul li .date sub {
position: absolute;
top: 4px;
right: 0;
color: #f06292;
font-size: 1rem;
line-height: 1;
vertical-align: top;
}
.calender ul li p {
margin-left: 10%;
width: calc(100% - 100px - 25px - 10%);
padding-right: 5px;
font-size: 0.8rem;
line-height: 1.3;
color: #0f46a1;
font-weight: 700;
}
.calender ul li p span {
display: block;
color: #f06292;
font-size: 0.9rem;
}
[class^=vso] .calender ul li .date {
color: #0098a6;
}
[class^=vso] .calender ul li .date sub {
color: #6be9f2;
}
[class^=vso] .calender ul li p {
color: #25c6da;
}
[class^=vso] .calender ul li p span {
color: #0098a6;
}
@media screen and (max-width: 1680px) {
.calender ul li .date {
width: 80px;
font-size: 2.1rem;
margin-left: 15px;
}
.calender ul li .date sub {
font-size: 0.8rem;
}
.calender ul li p {
margin-left: 7.5%;
width: calc(100% - 80px - 15px - 7.5%);
}
}
@media screen and (max-width: 840px) {
.calender ul li:nth-child(n+4) {
display: none;
}
}
.calender .link-block {
height: 140px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.calender .link-block span {
background-color: #f06292;
border-radius: 20px;
padding: 10px 20px;
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
color: white;
transition: background-color 0.3s;
}
.calender .link-block span:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 10px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.calender .link-block span:hover {
background-color: #eb407a;
}
.calender .link-block span:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .calender .link-block span {
background-color: #4fc2f8;
}
[class^=vso] .calender .link-block span:hover {
background-color: #2196f3;
}
.calenderOverview h4, .calenderOverview h3 {
height: 35px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
background-color: #f06292;
text-align: center;
color: white;
font-size: 0.9rem;
font-weight: 700;
padding: 0 20% 0 calc(28% + 115px);
}
.calenderOverview h3 {
background-color: #eb407a;
}
.calenderOverview article {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
min-height: 100px;
margin: 0 0 0 13.3333333333%;
padding: 0 0 0 6.6666666667%;
border-bottom: 1px solid #e5e5e5;
}
.calenderOverview article .date {
position: relative;
width: 115px;
font-size: 3rem;
line-height: 1;
color: #0f46a1;
text-align: right;
padding-right: 30px;
font-weight: 700;
font-family: "Dubai", "Arial", monospace;
}
.calenderOverview article .date sub {
position: absolute;
top: 4px;
right: 0;
color: #f06292;
font-size: 1rem;
line-height: 1;
vertical-align: top;
}
.calenderOverview article p {
margin-left: 10%;
width: calc(100% - 100px - 25px - 10%);
padding-right: 5px;
font-size: 0.8rem;
line-height: 1.3;
color: #0f46a1;
font-weight: 700;
}
.calenderOverview article p span {
display: block;
color: #f06292;
font-size: 0.9rem;
}
[class^=vso] .calenderOverview h4, [class^=vso] .calenderOverview h3 {
background-color: #ffb200;
}
[class^=vso] .calenderOverview h3 {
background-color: #ffa200;
}
[class^=vso] .calenderOverview article .date {
color: #0098a6;
}
[class^=vso] .calenderOverview article .date sub {
color: #6be9f2;
}
[class^=vso] .calenderOverview article p {
color: #25c6da;
}
[class^=vso] .calenderOverview article p span {
color: #0098a6;
}
.references-slider {
position: relative;
z-index: 2;
height: 725px;
background-color: #add582;
}
[class^=vso] .references-slider {
background-color: #25c6da;
}
.references-slider .reference-nav {
position: absolute;
bottom: 260px;
right: 12%;
margin: 0;
padding: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 67px;
height: 13px;
z-index: 3;
list-style: none;
}
.references-slider .reference-nav li {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -135px -88px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 13px;
cursor: pointer;
margin-right: 5px;
}
.references-slider .reference-nav li:last-of-type {
margin-right: 0;
}
.references-slider .reference-nav li.active {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -88px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 13px;
}
.references-slider .reference {
position: absolute;
left: 0;
top: 0;
padding-bottom: 60px;
height: 100%;
width: 100%;
}
.references-slider .reference.active {
z-index: 2;
}
.references-slider .reference.active figure, .references-slider .reference.active span, .references-slider .reference.active p {
opacity: 1;
}
.references-slider .reference figure {
width: 100%;
height: 420px;
background-size: cover;
background-position: 50% 25%;
opacity: 0;
transition: opacity 0.5s;
}
.references-slider .reference span {
display: block;
padding: 30px 12%;
color: white;
font-size: 0.8rem;
font-weight: 700;
opacity: 0;
transition: opacity 0.5s;
}
.references-slider .reference span strong {
font-size: 1.2rem;
line-height: 1.1;
}
.references-slider .reference p {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding: 0 12%;
margin: 0;
font-size: 1.1rem;
line-height: 1.2;
font-style: italic;
text-align: center;
color: white;
opacity: 0;
transition: opacity 0.5s;
}
.references-slider .reference a {
position: absolute;
bottom: 0;
left: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 60px;
width: 100%;
font-weight: 700;
color: white;
background-color: #9bbf75;
text-decoration: none;
transition: background-color 0.3s;
}
.references-slider .reference a:after {
content: "";
display: inline-block;
position: relative;
top: 2px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 15px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.references-slider .reference a:hover {
background-color: #8eb764;
}
.references-slider .reference a:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .references-slider .reference a {
background-color: #71dae7;
}
[class^=vso] .references-slider .reference a:hover {
background-color: #51d1e1;
}
/*==========================================================================
* Relevant pages | References
* ========================================================================== */
.references .relevant-pages-container {
background-color: white;
}
.references .relevant-pages-container .placeholder {
padding: 0 7.1428571429%;
}
.references .relevant-pages-container .relevant-pages {
padding: 60px 0 50px;
}
@media screen and (max-width: 840px) {
.references .relevant-pages-container .placeholder {
width: 100%;
padding: 0;
margin-left: 0;
}
.references .relevant-pages-container .placeholder .relevant-pages {
padding: 0 0 50px;
}
}
.references[class^=vso] .relevant-pages-container .relevant-pages p {
color: #0098a6;
}
.references[class^=vso] .relevant-pages-container .relevant-pages ul li a {
color: #25c6da;
}
.references[class^=vso] .relevant-pages-container .relevant-pages ul li a:hover {
color: #6be9f2;
}
.references[class^=vso] .relevant-pages-container .relevant-pages ul li a.active {
color: #0098a6;
}
/*==========================================================================
* News row
* ========================================================================== */
.post-row {
position: relative;
min-height: 500px;
padding-bottom: 50px;
/* Articles
* ========================================================================== */
/* Call-to-action button
* ========================================================================== */
}
.post-row:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
height: 220px;
width: 100%;
background-color: #e8eaf6;
}
[class^=vso] .post-row:after {
background-color: #f1f1f1;
}
.post-row .background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 220px);
background-image: url("/img/forest_top_view.jpg");
background-size: cover;
background-position: center bottom;
}
[class^=vso] .post-row .background {
background-image: url("/img/forest_top_view_green.jpg");
}
.post-row .streamer {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding: 50px 25px 0;
margin-top: 0;
margin-bottom: 0;
font-size: 0.9rem;
color: #1d88e6;
font-weight: 600;
display: none;
}
[class^=vso] .post-row .streamer {
color: #25c6da;
}
.post-row .article-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
overflow: visible;
padding-top: 60px;
}
.post-row .article-wrapper article {
width: 30%;
background-color: white;
box-shadow: 0 0 0 0 rgba(15, 70, 161, 0);
transition: box-shadow 0.4s;
}
.post-row .article-wrapper article a {
display: block;
text-decoration: none;
}
.post-row .article-wrapper article a figure {
width: 100%;
padding-bottom: 75%;
background-image: url("/img/no-image.jpg");
background-size: cover;
background-position: center;
}
.post-row .article-wrapper article a .content {
position: relative;
padding: 30px 8.3333333333% 20px;
min-height: 170px;
}
.post-row .article-wrapper article a .content .icon {
position: absolute;
left: 0;
top: -60px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #4fc2f8;
}
.post-row .article-wrapper article a .content .icon:before {
content: "";
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -128px no-repeat;
background-size: 502px 423px;
width: 26px;
height: 26px;
}
.post-row .article-wrapper article a .content h3 {
color: #0f46a1;
height: 85px;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
}
@media screen and (max-width: 1200px) {
.post-row .article-wrapper article a .content h3 {
font-size: 0.85rem;
}
}
.post-row .article-wrapper article a .content span {
color: #c5caea;
font-size: 0.8rem;
}
@media screen and (max-width: 1200px) {
.post-row .article-wrapper article a .content span {
font-size: 0.7rem;
}
}
.post-row .article-wrapper article:hover {
box-shadow: 0 0 20px 0 rgba(15, 70, 161, 0.3);
}
[class^=vso] .post-row .article-wrapper article {
box-shadow: 0 0 0 0 rgba(37, 198, 218, 0);
}
[class^=vso] .post-row .article-wrapper article a .content h3 {
color: #0098a6;
}
[class^=vso] .post-row .article-wrapper article a .content span.date {
color: #25c6da;
opacity: 0.5;
}
[class^=vso] .post-row .article-wrapper article:hover {
box-shadow: 0 0 20px 0 rgba(37, 198, 218, 0.4);
}
.post-row a.button {
background-color: #ffb200;
width: 220px;
height: 50px;
margin: 50px auto 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
border-radius: 25px;
color: white;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition: background 0.3s;
}
.post-row a.button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
display: inline-block;
margin-left: 15px;
margin-right: -10px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.post-row a.button:hover {
background-color: #ffa200;
}
.post-row a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
@media screen and (max-width: 840px) {
.post-row .article-wrapper {
width: 100%;
margin-left: 0;
}
.post-row .article-wrapper article a .content span {
display: inline-block;
height: 32px;
line-height: 1.2;
}
}
@media screen and (max-width: 600px) {
.post-row a.button, .post-row:after, .post-row .background {
display: none;
}
.post-row .streamer {
display: block;
}
.post-row .article-wrapper {
display: block;
padding-top: 20px;
}
.post-row .article-wrapper article {
height: auto;
width: 100%;
background-color: #0f46a1;
margin-bottom: 1px;
}
.post-row .article-wrapper article:nth-of-type(odd) {
background-color: #1b71dd;
}
[class^=vso] .post-row .article-wrapper article {
background-color: #25c6da;
}
[class^=vso] .post-row .article-wrapper article:nth-of-type(odd) {
background-color: #0098a6;
}
.post-row .article-wrapper article a {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.post-row .article-wrapper article a .content {
width: calc(100% - 120px);
padding: 25px;
min-height: 120px;
}
.post-row .article-wrapper article a .content .icon {
display: none;
}
.post-row .article-wrapper article a .content h3 {
font-size: 1.1rem;
color: white !important;
height: auto;
}
.post-row .article-wrapper article a .content .date {
font-size: 0.9rem;
color: white !important;
opacity: 0.6;
}
.post-row .article-wrapper article a figure {
width: 120px;
height: 100%;
padding-bottom: 0;
position: absolute;
right: 0;
top: 0;
}
.post-row .article-wrapper article a figure .overlay {
display: none;
}
.post-row .article-wrapper article a figure:after {
display: none;
}
}
@media screen and (max-width: 450px) {
.post-row .grid-row {
width: 100%;
}
.post-row .article-wrapper article a .content .date {
font-size: 0.8rem;
}
}
/*==========================================================================
* Relevant pages | News
* ========================================================================== */
.news .relevant-pages-container {
background-color: white;
}
.news .relevant-pages-container .placeholder {
padding: 0 7.1428571429%;
}
.news .relevant-pages-container .relevant-pages {
padding: 60px 0 50px;
}
@media screen and (max-width: 840px) {
.news .relevant-pages-container .placeholder {
width: 100%;
margin-left: 0;
padding: 0;
}
.news .relevant-pages-container .placeholder .relevant-pages {
padding: 0 0 50px;
}
}
.news[class^=vso] .relevant-pages-container .relevant-pages p {
color: #0098a6;
}
.news[class^=vso] .relevant-pages-container .relevant-pages ul li a {
color: #25c6da;
}
.news[class^=vso] .relevant-pages-container .relevant-pages ul li a:hover {
color: #6be9f2;
}
.news[class^=vso] .relevant-pages-container .relevant-pages ul li a.active {
color: #0098a6;
}
/* Read more news
* ========================================================================== */
.next-news-items {
margin-top: 60px;
padding-left: 20%;
}
.next-news-items p {
font-size: 1.05rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 15px;
}
.main .next-news-items .no-news.button {
margin-top: 10px;
}
.next-news-items .wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.next-news-items article {
width: calc((100% - 15px) / 2);
margin-bottom: 15px;
}
.next-news-items article a {
position: relative;
display: block;
width: 100%;
text-decoration: none;
background-color: #1d88e6;
transition: background 0.4s;
}
.next-news-items article a figure {
position: relative;
width: 100%;
height: 0;
padding-bottom: 57.2%;
overflow: hidden;
}
.next-news-items article a figure .overlay {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #4fc2f8;
background-size: cover;
background-position: center;
transform: scale3d(1, 1, 1);
transition: transform 0.7s;
}
.next-news-items article a .content {
position: relative;
z-index: 5;
padding: 30px;
min-height: 137px;
}
.next-news-items article a .content h3 {
color: white;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
}
.next-news-items article a .content .date {
color: #4fc2f8;
font-size: 0.9rem;
line-height: 1.2;
font-weight: 600;
}
.next-news-items article a:hover {
background-color: #1b71dd;
}
.next-news-items article a:hover figure .overlay {
transform: scale3d(1.06, 1.06, 1);
}
[class^=vso] .next-news-items p {
color: #0098a6;
}
[class^=vso] .next-news-items article a {
background-color: #0098a6;
}
[class^=vso] .next-news-items article a figure span {
background-color: #25c6da;
}
[class^=vso] .next-news-items article a .content .date {
color: #B2EBF2 !important;
}
[class^=vso] .next-news-items article a:hover {
background-color: #25c6da;
}
@media screen and (max-width: 1500px) {
.next-news-items .wrapper {
display: block;
}
.next-news-items article {
width: 100%;
max-width: 430px;
}
}
@media screen and (max-width: 840px) {
.next-news-items {
margin-top: 0;
padding-left: 7.1428571429%;
}
}
@media screen and (max-width: 500px) {
.next-news-items {
padding-left: 0;
}
.next-news-items p {
padding-left: 7.1428571429%;
}
.next-news-items .wrapper {
font-size: 0;
}
.next-news-items article {
height: auto;
width: 100%;
max-width: none;
background-color: #0f46a1;
margin-bottom: 1px;
}
.next-news-items article:nth-of-type(odd) {
background-color: #1b71dd;
}
.next-news-items article a .content {
padding: 25px;
min-height: 120px;
}
.next-news-items article a .content h3 {
font-size: 1.1rem;
}
.next-news-items article a .content .date {
font-size: 0.9rem;
margin: 0 !important;
}
[class^=vso] .next-news-items article {
background-color: #0098a6;
}
[class^=vso] .next-news-items article:nth-of-type(odd) {
background-color: #25c6da;
}
}
/*==========================================================================
* School Selection block | Landingspage
* ========================================================================== */
.school-selection {
position: relative;
/* Selection
* ========================================================================== */
/* Mobile view
* ========================================================================== */
}
.school-selection .background {
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 75%;
background-image: url("/img/forest_top_view.jpg");
background-size: cover;
background-position-y: bottom;
}
.school-selection .selection-block {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 95%;
max-width: 1300px;
margin-bottom: -60px;
top: -150px;
/* Styling Icon
* ========================================================================== */
}
@media screen and (max-width: 1300px) {
.school-selection .selection-block {
top: -135px;
}
}
@media screen and (max-width: 900px) {
.school-selection .selection-block {
display: block;
}
}
.school-selection .selection-block .school-type--so .school-type__top {
background-color: #0f46a1;
}
.school-selection .selection-block .school-type--so .selection {
background-color: #f06292;
}
.school-selection .selection-block .school-type--vso .school-type__top {
background-color: #0098a6;
}
.school-selection .selection-block .school-type--vso .selection {
background-color: #ffb200;
}
.school-selection .selection-block .school-type--bn .school-type__top {
background-color: #78a0b4;
}
.school-selection .selection-block .school-type--bn .selection {
background-color: #4fc2f8;
}
.school-selection .selection-block .school-type {
width: calc((100% - 120px) / 3);
max-width: 425px;
position: relative;
border-radius: 25px;
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type {
display: block;
width: 100%;
margin: 60px auto 0;
}
.school-selection .selection-block .school-type:first-child {
margin-top: 0;
}
}
.school-selection .selection-block .school-type .school-type__top {
padding: 25px 0;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 1300px) {
.school-selection .selection-block .school-type .school-type__top {
padding: 20px 0;
}
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type .school-type__top {
padding: 10px 0 8px;
}
}
.school-selection .selection-block .school-type .school-type__top .school-type__background {
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
color: #1d1d1d;
opacity: 0.1;
top: 0;
}
@media screen and (min-width: 1350px) {
.school-selection .selection-block .school-type .school-type__top .school-type__background svg {
width: 100%;
}
}
@media screen and (max-width: 1350px) {
.school-selection .selection-block .school-type .school-type__top .school-type__background svg {
height: 100%;
}
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type .school-type__top .school-type__background svg {
height: auto;
width: 100%;
}
}
.school-selection .selection-block .school-type .school-type__top .type-logo {
width: 42px;
position: relative;
margin: 0 auto;
z-index: 1;
}
.school-selection .selection-block .school-type .school-type__top .type-logo img {
width: 100%;
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type .school-type__top .type-logo {
display: none;
}
}
.school-selection .selection-block .school-type h2 {
position: relative;
z-index: 2;
padding: 15px 5px 0;
color: white;
font-size: 1.1rem;
font-weight: 700;
text-align: center;
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type h2 {
padding: 0 5px 0 30px;
text-align: left;
}
}
.school-selection .selection-block .school-type .selection {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
/* Schools
* ========================================================================== */
}
.school-selection .selection-block .school-type .selection .schools {
width: 100%;
font-size: 0;
line-height: 0;
z-index: 2;
}
.school-selection .selection-block .school-type .selection .schools a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
position: relative;
height: 50px;
width: 100%;
margin: 0;
padding: 15px 30px;
text-decoration: none;
font-size: 1.2rem;
font-weight: 600;
transition: background-color 0.3s;
}
@media screen and (max-width: 1300px) {
.school-selection .selection-block .school-type .selection .schools a {
height: 45px;
}
}
.school-selection .selection-block .school-type .selection .schools a:nth-child(even) {
border-top: 1.3px solid rgba(195, 205, 230, 0.4);
border-bottom: 1.3px solid rgba(195, 205, 230, 0.4);
}
.school-selection .selection-block .school-type .selection .schools a p {
margin: 0;
color: white;
font-size: 0.8rem;
line-height: 1;
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .school-type .selection .schools a p {
font-size: 1rem;
}
}
.school-selection .selection-block .school-type .selection .schools a span {
position: absolute;
right: 30px;
width: 18px;
bottom: 18px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
color: white;
}
.school-selection .selection-block .school-type .selection .schools a span svg {
max-height: 12px;
}
.school-selection .selection-block .school-type .selection .schools a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.school-selection .selection-block .school-type .selection .schools a:hover span {
-webkit-transform: translate3d(10px, 0, 0);
-moz-transform: translate3d(10px, 0, 0);
-ms-transform: translate3d(10px, 0, 0);
-o-transform: translate3d(10px, 0, 0);
-spec-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
.school-selection .selection-block .icon {
position: absolute;
right: -60px;
bottom: -45px;
width: 60px;
height: 76px;
}
.school-selection .selection-block .icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -256px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 76px;
display: block;
}
@media screen and (max-width: 900px) {
.school-selection .selection-block .icon {
display: none;
}
}
/*==========================================================================
* About block | Landingspage
* ========================================================================== */
.about-block__wrapper {
padding-bottom: 120px;
overflow: hidden;
/* About content
* ========================================================================== */
}
@media screen and (max-width: 840px) {
.about-block__wrapper {
padding-bottom: 40px;
}
}
.about-block {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 75%;
padding-top: 130px;
}
@media screen and (max-width: 840px) {
.about-block {
display: block;
padding-top: 90px;
width: 100%;
}
}
.about__image {
position: relative;
width: 45%;
display: inline-block;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: initial;
-moz-align-items: initial;
-ms-align-items: initial;
align-items: initial;
}
.about__image:before {
content: "";
position: absolute;
width: 70%;
height: 100%;
background-color: #b8d6e6;
opacity: 0.25;
border-radius: 15px;
padding: 50px 0;
top: -50px;
left: -50px;
}
@media screen and (max-width: 840px) {
.about__image:before {
display: none;
}
}
@media screen and (max-width: 840px) {
.about__image {
width: 100%;
padding-bottom: 40px;
}
}
.about__image img {
width: 100%;
z-index: 2;
}
.about__content {
position: relative;
width: 45%;
margin-left: 10%;
display: inline-block;
}
.about__content:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #f06292;
opacity: 0.25;
border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
right: -120%;
}
@media screen and (max-width: 840px) {
.about__content:before {
display: none;
}
}
@media screen and (max-width: 840px) {
.about__content {
width: 85%;
margin: 0 7.5%;
}
}
.about__content h1 {
font-weight: 700;
font-style: italic;
color: #0f46a1;
font-size: 2.2rem;
line-height: 1.2;
max-width: 320px;
display: inline-block;
}
.about__content .text {
font-size: 0.9rem;
line-height: 1.8;
color: #737373;
}
@media screen and (min-width: 840px) {
.about__content .text {
max-width: 550px;
}
}
.about__content .text p {
color: #737373;
}
.about__content .text p a {
color: #737373;
text-decoration: none;
border-bottom: 2px solid #737373;
transition: color 0.3s, border 0.3s;
}
.about__content .text p a:hover {
color: #333333;
border-bottom-color: #4d4d4d;
}
.about__content .content h1 {
margin: 30px 0 45px;
font-weight: 700;
font-style: italic;
color: #0f46a1;
font-size: 2.2rem;
line-height: 1.2;
max-width: 320px;
}
.about__content .content .text {
font-size: 0.9rem;
line-height: 1.8;
}
.about__content .content .text p {
color: #737373;
}
.about__content .content .text p a {
color: #737373;
text-decoration: none;
border-bottom: 2px solid #737373;
transition: color 0.3s, border 0.3s;
}
.about__content .content .text p a:hover {
color: #333333;
border-bottom-color: #4d4d4d;
}
.about__content .content .internalLink {
color: #313fa0;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
.about__content .content .internalLink:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -176px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 1px, 0) rotate(90deg);
-moz-transform: translate3d(0, 1px, 0) rotate(90deg);
-ms-transform: translate3d(0, 1px, 0) rotate(90deg);
-o-transform: translate3d(0, 1px, 0) rotate(90deg);
-spec-transform: translate3d(0, 1px, 0) rotate(90deg);
transform: translate3d(0, 1px, 0) rotate(90deg);
transition: transform 0.3s;
}
.about__content .content .internalLink:hover:after {
-webkit-transform: translate3d(0, 4px, 0) rotate(90deg);
-moz-transform: translate3d(0, 4px, 0) rotate(90deg);
-ms-transform: translate3d(0, 4px, 0) rotate(90deg);
-o-transform: translate3d(0, 4px, 0) rotate(90deg);
-spec-transform: translate3d(0, 4px, 0) rotate(90deg);
transform: translate3d(0, 4px, 0) rotate(90deg);
}
/*==========================================================================
* Service block | Landingspage
* ========================================================================== */
.service-block {
position: relative;
background-color: #78a0b4;
padding-bottom: 80px;
/* Service content
* ========================================================================== */
/* Image
* ========================================================================== */
}
@media screen and (max-width: 840px) {
.service-block {
padding-bottom: 50px;
}
}
.service-block:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 60px;
background-color: white;
}
@media screen and (max-width: 840px) {
.service-block:before {
display: none;
}
}
.service-block .grid-row {
position: relative;
}
.service-block .grid-col {
vertical-align: top;
}
.service-block .content {
padding-top: 60px;
}
.service-block .content .logo {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -200px -220px no-repeat;
background-size: 502px 423px;
width: 94px;
height: 200px;
display: block;
}
@media screen and (max-width: 840px) {
.service-block .content {
width: 100%;
margin-left: 0;
padding-top: 20px;
}
.service-block .content .logo {
display: none;
}
}
.service-block .content h2 {
font-size: 1.2rem;
color: white;
opacity: 1;
font-weight: 700;
margin: 30px 0 35px;
}
.service-block .content h2.xxl {
font-size: 3rem;
}
.service-block .content .text {
font-size: 0.9rem;
line-height: 1.8;
}
.service-block .content .text p {
color: white;
margin: 0;
opacity: 0.7;
}
.service-block .content .text h2 {
font-size: 1.3rem;
}
.service-block .content .cta {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
border: 1px solid white;
border-radius: 25px;
width: 220px;
height: 50px;
margin-top: 60px;
color: white;
font-weight: 700;
text-decoration: none;
}
.service-block .content .cta:after {
content: "";
position: relative;
top: 2px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 10px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.service-block .content .cta:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.service-block .image {
width: 45.8333333333%;
background-color: #78a0b4;
}
@media screen and (max-width: 840px) {
.service-block .image {
display: none;
}
}
.service-block .image img {
width: 100%;
}
.service-block .internalLink {
position: absolute;
top: 30px;
right: -60px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: #ffb200;
transition: background-color 0.3s;
}
@media screen and (max-width: 900px) {
.service-block .internalLink {
display: none;
}
}
.service-block .internalLink:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
display: inline-block;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0) rotate(-90deg);
-moz-transform: translate3d(0, 0, 0) rotate(-90deg);
-ms-transform: translate3d(0, 0, 0) rotate(-90deg);
-o-transform: translate3d(0, 0, 0) rotate(-90deg);
-spec-transform: translate3d(0, 0, 0) rotate(-90deg);
transform: translate3d(0, 0, 0) rotate(-90deg);
transition: transform 0.3s;
}
.service-block .internalLink:hover {
background-color: #ffa200;
}
.service-block .internalLink:hover:after {
-webkit-transform: translate3d(0, -5px, 0) rotate(-90deg);
-moz-transform: translate3d(0, -5px, 0) rotate(-90deg);
-ms-transform: translate3d(0, -5px, 0) rotate(-90deg);
-o-transform: translate3d(0, -5px, 0) rotate(-90deg);
-spec-transform: translate3d(0, -5px, 0) rotate(-90deg);
transform: translate3d(0, -5px, 0) rotate(-90deg);
}
.services-selection {
text-align: center;
margin-bottom: 100px;
}
.services-selection > .grid-col {
background-color: #a1bdcb;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
position: relative;
height: 240px;
margin: 0 auto;
padding: 0;
text-decoration: none;
transition: background-color 0.3s;
}
.services-selection > .grid-col .logo {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 240px;
width: 25%;
background-color: #78a0b4;
}
.services-selection > .grid-col .logo:after {
content: "";
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -205px -220px no-repeat;
background-size: 502px 423px;
width: 100px;
height: 205px;
}
.services-selection > .grid-col a {
text-align: left;
position: relative;
width: 25%;
height: 100%;
padding: 0 40px 0 30px;
color: white;
font-size: 1.3rem;
text-decoration: none;
line-height: 1.3;
font-weight: 700;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
background: linear-gradient(to right, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0));
}
.services-selection > .grid-col a:hover {
background-color: #91b1c2;
}
.services-selection > .grid-col a:hover span {
-webkit-transform: translate3d(15px, 0, 0);
-moz-transform: translate3d(15px, 0, 0);
-ms-transform: translate3d(15px, 0, 0);
-o-transform: translate3d(15px, 0, 0);
-spec-transform: translate3d(15px, 0, 0);
transform: translate3d(15px, 0, 0);
}
.services-selection > .grid-col a sub {
display: block;
opacity: 0.7;
font-size: 1rem;
font-weight: 400;
}
.services-selection > .grid-col span {
position: absolute;
right: 30px;
top: 60px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -365px no-repeat;
background-size: 502px 423px;
width: 40px;
height: 31px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
@media screen and (max-width: 1300px) {
.services-selection > .grid-col span {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
top: 75px;
}
}
@media screen and (max-width: 350px) {
.services-selection > .grid-col span {
display: none;
}
}
@media screen and (max-width: 1400px) {
.services-selection > .grid-col {
width: 91.6666666667%;
}
}
@media screen and (max-width: 840px) {
.services-selection {
margin: 0 auto 20px;
width: 100%;
}
.services-selection > .grid-col {
width: 100%;
}
.services-selection > .grid-col .logo {
display: none;
}
.services-selection > .grid-col a {
width: 33%;
}
.services-selection > .grid-col a p {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.services-selection > .grid-col {
height: auto;
width: 100%;
display: block;
}
.services-selection > .grid-col a {
width: 100%;
height: auto;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0));
}
.services-selection > .grid-col a p {
text-align: center;
}
}
/*==========================================================================
* Header block - Home
* ========================================================================== */
.home-intro {
position: relative;
padding-bottom: 160px;
/* Main image
* ========================================================================== */
/* Blocks below the image
* ========================================================================== */
}
[class^=services] .home-intro, [class^=foundation] .home-intro, [class^=jobs] .home-intro, [class^=academy] .home-intro {
padding-top: 20%;
}
.home-intro > figure {
position: absolute;
left: 0;
top: 0;
width: 79.1666666667%;
height: calc(100% - 160px);
background-size: cover;
background-position: center;
}
.home-intro > figure img {
width: 100%;
}
.home-intro .home-blocks {
position: relative;
z-index: 2;
display: block;
top: 60px;
margin-bottom: -100px;
font-size: 0;
line-height: 0;
white-space: nowrap;
letter-spacing: 0;
}
.home-intro .home-blocks:after {
content: "";
position: absolute;
height: 160px;
}
.home-intro .home-blocks .home-link-block {
position: relative;
height: 280px;
display: inline-block;
width: 30%;
margin-right: 5%;
vertical-align: top;
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.4px;
}
.home-intro .home-blocks .home-link-block:last-child {
margin-right: 0;
}
.home-intro .home-blocks .home-link-block .placeholder {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
height: 100%;
padding: 40px 10px 75px;
text-decoration: none;
}
.home-intro .home-blocks .home-link-block .placeholder figure {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 60px;
height: 60px;
margin-bottom: 20px;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.1);
}
.home-intro .home-blocks .home-link-block .placeholder figure:before {
content: "";
display: block;
}
.home-intro .home-blocks .home-link-block .placeholder h4 {
width: 100%;
margin: 0;
font-size: 1.2rem;
line-height: 1.4;
text-align: center;
color: white;
opacity: 0.8;
}
.home-intro .home-blocks .home-link-block .placeholder p {
width: 100%;
margin: 0 0 20px;
font-size: 0.9rem;
font-style: italic;
text-align: center;
color: white;
}
.home-intro .home-blocks .home-link-block .placeholder span {
position: absolute;
bottom: 35px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 180px;
height: 40px;
left: calc((100% - 180px) / 2);
background-color: transparent;
border: 1px solid white;
border-radius: 20px;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.home-intro .home-blocks .home-link-block .placeholder span:after {
content: "";
position: relative;
top: 1px;
display: inline-block;
margin-left: 20px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.home-intro .home-blocks .home-link-block .placeholder:hover span {
background-color: rgba(255, 255, 255, 0.1);
}
.home-intro .home-blocks .home-link-block .placeholder:hover span:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
@media screen and (max-width: 1000px) {
.home-intro .home-blocks .home-link-block {
height: 220px;
}
.home-intro .home-blocks .home-link-block .placeholder {
padding: 15px 10px;
}
.home-intro .home-blocks .home-link-block .placeholder h4 {
font-size: 1rem;
}
.home-intro .home-blocks .home-link-block .placeholder p {
font-size: 0.8rem;
}
.home-intro .home-blocks .home-link-block .placeholder span {
bottom: 25px;
width: 150px;
font-size: 0.8rem;
}
}
.home-intro .home-blocks .home-link-block.new-zuiderbos {
background-color: #f06292;
}
.home-intro .home-blocks .home-link-block.new-zuiderbos .placeholder figure {
background-color: #f48eb1;
}
.home-intro .home-blocks .home-link-block.new-zuiderbos .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -122px -128px no-repeat;
background-size: 502px 423px;
width: 27px;
height: 26px;
}
.home-intro .home-blocks .home-link-block.latest-news {
background-color: #0f46a1;
}
.home-intro .home-blocks .home-link-block.latest-news .placeholder figure {
background-color: #2196f3;
}
.home-intro .home-blocks .home-link-block.latest-news .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -128px no-repeat;
background-size: 502px 423px;
width: 27px;
height: 25px;
}
.home-intro .home-blocks .home-link-block.sick {
background-color: #ffb200;
}
.home-intro .home-blocks .home-link-block.sick .placeholder figure {
background-color: #ffc928;
}
.home-intro .home-blocks .home-link-block.sick .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -102px no-repeat;
background-size: 502px 423px;
width: 20px;
height: 20px;
}
.home-intro .home-blocks .home-link-block.faq {
background-color: #ffb200;
}
.home-intro .home-blocks .home-link-block.faq .placeholder figure {
background-color: #ffc928;
}
.home-intro .home-blocks .home-link-block.faq .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -174px -128px no-repeat;
background-size: 502px 423px;
width: 12px;
height: 24px;
}
.home-intro .home-blocks .home-link-block.academy {
background-color: #78a0b4;
}
.home-intro .home-blocks .home-link-block.academy .placeholder figure {
background-color: #4e7f99;
}
.home-intro .home-blocks .home-link-block.academy .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -167px -390px no-repeat;
background-size: 502px 423px;
width: 28px;
height: 25px;
}
.home-intro .home-blocks .home-link-block.education {
background-color: #add582;
}
.home-intro .home-blocks .home-link-block.education .placeholder h4 {
opacity: 1;
}
.home-intro .home-blocks .home-link-block.education .placeholder figure {
background-color: #9bbf75;
}
.home-intro .home-blocks .home-link-block.education .placeholder figure:before {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -135px -400px no-repeat;
background-size: 502px 423px;
width: 28px;
height: 16px;
}
[class^=vso] .home-intro .home-blocks .home-link-block.new-zuiderbos {
background-color: #0098a6;
}
[class^=vso] .home-intro .home-blocks .home-link-block.new-zuiderbos .placeholder figure {
background-color: #25c6da;
}
[class^=vso] .home-intro .home-blocks .home-link-block.latest-news {
background-color: #4fc2f8;
}
[class^=vso] .home-intro .home-blocks .home-link-block.latest-news .placeholder figure {
background-color: #80d6ff;
}
@media screen and (max-width: 1680px) {
.home-intro .home-directions {
margin-bottom: 120px;
}
}
/*==========================================================================
* Content block - Home
* ========================================================================== */
.home-content {
position: relative;
margin-top: -160px;
/* Main content
* ========================================================================== */
/* Contact options bellow main content
* ========================================================================== */
}
.home-content .background {
position: absolute;
left: 0;
height: 100%;
width: 50%;
background-color: white;
}
.home-content .background:after {
content: "";
position: absolute;
left: 100%;
bottom: 0;
height: calc(100% - 160px);
width: 100%;
background-color: #e8eaf6;
}
.home-content .grid-row {
min-height: 840px;
padding-top: 160px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
position: relative;
}
.home-content .grid-row:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 20.8333333333%;
height: 100%;
width: 100%;
background-color: white;
}
.home-content.service-content {
margin-top: 0;
}
.home-content.service-content .left-icon {
position: absolute;
left: 0;
bottom: 40px;
z-index: 4;
width: 60px;
height: 212px;
}
.home-content.service-content .left-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
@media screen and (max-width: 840px) {
.home-content.service-content .left-icon {
display: none;
}
}
.home-content.service-content .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
min-height: 0;
}
.home-content.service-content section h1 {
color: #78a0b4;
}
.home-content.service-content section p {
color: rgba(115, 115, 115, 0.8);
}
.home-content.service-content section p a, .home-content.service-content section p strong {
color: #737373;
}
.home-content.service-content section ul li, .home-content.service-content section ol li {
color: rgba(115, 115, 115, 0.8);
}
.home-content.service-content section ul li:before, .home-content.service-content section ol li:before {
color: rgba(115, 115, 115, 0.8);
}
@media screen and (max-width: 1300px) {
.home-content.service-content section {
padding-right: 0;
}
}
.home-content.service-content .contact-options .option p {
color: #78a0b4;
}
.home-content.service-content .contact-options .option p a {
color: #a1cee6;
}
.home-content.service-content .contact-options .option p a:hover {
color: #8dc4e1;
}
.home-content.job-content {
margin-top: 0;
}
@media screen and (max-width: 840px) {
.home-content.job-content {
background-color: #002382;
}
}
.home-content.job-content .background {
height: auto;
}
.home-content.job-content .grid-row.home-intro {
padding-bottom: 0;
padding-top: 0;
z-index: 20;
}
@media screen and (max-width: 1200px) {
.home-content.job-content .grid-row.home-intro {
display: block;
}
.home-content.job-content .grid-row.home-intro .grid-col {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.home-content.job-content .grid-row.home-intro .grid-col:first-child {
padding-bottom: 0;
}
}
.home-content.job-content .grid-row:after {
content: normal;
}
.home-content.job-content .grid-row .references-slider {
background-color: transparent;
height: 0;
width: 100%;
padding-bottom: 100%;
}
.home-content.job-content .grid-row .references-slider .reference-nav {
bottom: -20px;
right: auto;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.home-content.job-content .grid-row .references-slider li {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -183px -230px no-repeat;
background-size: 502px 423px;
width: 20px;
height: 20px;
background-size: 600px 500px;
}
.home-content.job-content .grid-row .references-slider li:before {
content: normal;
}
.home-content.job-content .grid-row .references-slider li.active {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -165px -230px no-repeat;
background-size: 502px 423px;
width: 20px;
height: 20px;
background-size: 600px 500px;
}
.home-content.job-content .grid-row figure {
width: 100%;
background-size: contain;
background-position: 50% 25%;
opacity: 0;
transition: opacity 0.5s;
background-repeat: no-repeat;
}
.home-content.job-content .grid-row figure.active {
opacity: 1;
}
.home-content.job-content .grid-row section {
background-color: transparent;
overflow: visible;
}
.home-content.job-content .grid-row section p {
color: #b8d6e6;
margin: 0;
max-width: none;
}
.home-content.job-content .grid-row section h1 {
color: white;
}
.home-content.job-content .left-icon {
position: absolute;
left: 0;
bottom: 40px;
z-index: 4;
width: 60px;
height: 212px;
}
.home-content.job-content .left-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
@media screen and (max-width: 840px) {
.home-content.job-content .left-icon {
display: none;
}
}
.home-content.job-content .grid-row {
padding-top: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
min-height: 0;
}
.home-content.job-content section h1 {
color: #78a0b4;
}
.home-content.job-content section p {
color: rgba(115, 115, 115, 0.8);
}
.home-content.job-content section p a, .home-content.job-content section p strong {
color: #737373;
}
.home-content.job-content section ul li, .home-content.job-content section ol li {
color: rgba(115, 115, 115, 0.8);
}
.home-content.job-content section ul li:before, .home-content.job-content section ol li:before {
color: rgba(115, 115, 115, 0.8);
}
@media screen and (max-width: 1300px) {
.home-content.job-content section {
padding-right: 0;
}
}
.home-content.job-content .links-holder {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
@media screen and (max-width: 425px) {
.home-content.job-content .links-holder {
display: block;
margin-top: 20px;
}
}
.home-content.job-content .links-holder .internalLink {
display: inline-block;
padding: 15px 30px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
@media screen and (max-width: 425px) {
.home-content.job-content .links-holder .internalLink {
position: relative;
width: 100%;
}
}
.home-content.job-content .links-holder .internalLink:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 60px;
transition: transform 0.3s;
-webkit-transform: translate3d(0, 0, 0) rotate(90deg);
-moz-transform: translate3d(0, 0, 0) rotate(90deg);
-ms-transform: translate3d(0, 0, 0) rotate(90deg);
-o-transform: translate3d(0, 0, 0) rotate(90deg);
-spec-transform: translate3d(0, 0, 0) rotate(90deg);
transform: translate3d(0, 0, 0) rotate(90deg);
}
@media screen and (max-width: 425px) {
.home-content.job-content .links-holder .internalLink:after {
margin-left: 0;
position: absolute;
right: 5%;
margin-top: 2px;
}
}
.home-content.job-content .links-holder .internalLink:hover {
background-color: #ffa200;
}
.home-content.job-content .links-holder .internalLink:hover:after {
-webkit-transform: translate3d(0, 5px, 0) rotate(90deg);
-moz-transform: translate3d(0, 5px, 0) rotate(90deg);
-ms-transform: translate3d(0, 5px, 0) rotate(90deg);
-o-transform: translate3d(0, 5px, 0) rotate(90deg);
-spec-transform: translate3d(0, 5px, 0) rotate(90deg);
transform: translate3d(0, 5px, 0) rotate(90deg);
}
.home-content.job-content .links-holder .contact-options {
display: block;
margin-left: auto;
margin-top: 25px;
width: auto;
}
.home-content.job-content .links-holder .contact-options .option {
text-align: left;
width: 100%;
}
@media screen and (max-width: 425px) {
.home-content.job-content .links-holder .contact-options .option {
text-align: center;
}
}
.home-content.job-content .links-holder .contact-options .option p {
color: #4fc2f8;
}
.home-content.job-content .links-holder .contact-options .option p a {
color: white;
}
.home-content.job-content .links-holder .contact-options .option p a:hover {
color: #f2f2f2;
}
.home-content .job-info {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 32px;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.home-content .job-info {
flex-direction: column;
align-items: center;
}
.home-content .job-info svg {
margin-top: 16px;
}
}
.home-content .job-info .job-info__item {
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
font-size: 16px;
line-height: 24px;
color: #b8d6e6;
text-align: center;
}
.home-content .job-info .job-info__item svg {
margin-bottom: 8px;
color: #ffb200;
}
@media screen and (max-width: 768px) {
.home-content .job-info .job-info__item {
width: 75%;
}
}
.home-content .job-info aside {
margin-top: 80px;
}
.home-content .job-info--contact {
margin-top: 36px;
}
.home-content .job-info--contact .job-info__item svg {
color: #4fc2f8;
}
.home-content section {
background-color: white;
padding-top: 80px;
padding-bottom: 100px;
position: relative;
z-index: 2;
}
@media screen and (max-width: 1300px) {
.home-content section {
padding-right: 50px;
}
}
.home-content section h1 {
font-size: 1.6rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 40px;
}
[class^=vso] .home-content section h1 {
color: #25c6da;
}
.home-content section p {
font-size: 0.9rem;
color: #737373;
margin: 0 0 40px;
max-width: 600px;
}
.home-content section p strong {
color: #333;
}
.home-content section p a {
color: #1d88e6;
text-decoration: none;
transition: color 0.3s;
}
.home-content section p a:hover {
color: #1260a4;
}
[class^=vso] .home-content section p a {
color: #25c6da;
}
[class^=vso] .home-content section p a:hover {
color: #1e9eae;
}
.home-content section ul, .home-content section ol {
padding-left: 20px;
list-style: none;
}
.home-content section ul li, .home-content section ol li {
position: relative;
padding-left: 20px;
font-size: 1.1rem;
color: #acb0cc;
}
.home-content section ul li:before, .home-content section ol li:before {
position: absolute;
color: #acb0cc;
font-size: 1.2rem;
line-height: 1;
left: -20px;
}
.home-content section ul li:before {
content: "•";
top: 3px;
}
.home-content section ol {
counter-reset: ol-counter;
}
.home-content section ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 6px;
}
.home-content section > a {
display: inline-block;
padding: 15px 30px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.home-content section > a:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.home-content section > a:hover {
background-color: #ffa200;
}
.home-content section > a:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.home-content .contact-options {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
margin-top: 50px;
}
.home-content .contact-options .option {
width: 50%;
}
.home-content .contact-options .option p {
font-size: 0.9rem;
font-weight: 700;
color: #1d88e6;
}
.home-content .contact-options .option p a {
display: block;
color: #4fc2f8;
text-decoration: none;
transition: color 0.4s;
}
.home-content .contact-options .option p a:hover {
color: #eb407a;
}
.home-content .contact-options .option.school-guide p a {
position: relative;
padding-left: 30px;
}
.home-content .contact-options .option.school-guide p a:before {
content: "";
position: absolute;
top: 2px;
left: 0;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -95px -175px no-repeat;
background-size: 502px 423px;
width: 19px;
height: 24px;
display: inline-block;
}
[class^=vso] .home-content .contact-options .option p {
color: #0098a6;
}
[class^=vso] .home-content .contact-options .option p a {
color: #25c6da;
}
[class^=vso] .home-content .contact-options .option p a:hover {
color: #6be9f2;
}
.home-content aside {
background-color: white;
}
.home-content aside .impression-image {
width: 100%;
position: relative;
z-index: 2;
}
.home-content aside:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #e8eaf6;
}
@media screen and (max-width: 1280px) {
.home-content aside {
width: 40%;
}
}
#vacature-contact {
background-image: url(/img/forest_top_view_grey.jpg);
background-position: right bottom;
background-size: cover;
width: 100%;
background-color: #f06292;
}
#vacature-contact .container {
width: 85.7142857143%;
max-width: 1680px;
margin-right: auto;
margin-left: auto;
}
#vacature-contact .container .job-info {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 48px;
padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
#vacature-contact .container .job-info {
flex-direction: column;
align-items: center;
}
#vacature-contact .container .job-info svg {
margin-top: 16px;
}
}
#vacature-contact .container .job-info .job-info__item {
text-decoration: none;
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
font-size: 16px;
line-height: 24px;
color: white;
text-align: center;
}
#vacature-contact .container .job-info .job-info__item svg {
margin-bottom: 8px;
color: #ffb200;
}
@media screen and (max-width: 768px) {
#vacature-contact .container .job-info .job-info__item {
width: 75%;
}
}
#vacature .content-block, #vacature .full-text-block {
background-image: none;
}
#vacature .content-block:nth-of-type(n), #vacature .full-text-block:nth-of-type(n) {
background-color: #2196f3;
}
#vacature .content-block:nth-of-type(2n), #vacature .full-text-block:nth-of-type(2n) {
color: white;
background-color: #ffa200;
}
#vacature .content-block:nth-of-type(2n) p, #vacature .content-block:nth-of-type(2n) strong, #vacature .content-block:nth-of-type(2n) h2, #vacature .full-text-block:nth-of-type(2n) p, #vacature .full-text-block:nth-of-type(2n) strong, #vacature .full-text-block:nth-of-type(2n) h2 {
color: white;
}
#vacature .content-block:nth-of-type(3n), #vacature .full-text-block:nth-of-type(3n) {
color: white;
background-color: #2196f3;
}
#vacature .content-block:nth-of-type(3n) p, #vacature .content-block:nth-of-type(3n) strong, #vacature .content-block:nth-of-type(3n) h2, #vacature .full-text-block:nth-of-type(3n) p, #vacature .full-text-block:nth-of-type(3n) strong, #vacature .full-text-block:nth-of-type(3n) h2 {
color: white;
}
.faq-block {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: initial;
-moz-align-items: initial;
-ms-align-items: initial;
align-items: initial;
padding-bottom: 100px;
}
.faq-home {
position: relative;
z-index: 2;
background-color: #0f46a1;
width: 90%;
max-width: 1200px;
border-radius: 15px;
overflow: hidden;
}
.faq-home .header {
position: relative;
height: 100px;
padding: 30px 30px;
line-height: 1.3;
border-bottom: 1px solid rgba(197, 202, 234, 0.2);
}
.faq-home .header h2 {
display: inline-block;
font-size: 1.8rem;
color: #fff;
font-weight: 600;
transition: color 0.3s;
}
.faq-home .header span {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 23px;
text-align: center;
background-color: #1d88e6;
color: #fff;
padding: 7px;
border-radius: 50%;
}
.faq-home .header span svg {
height: 100%;
}
.faq-home .content {
position: relative;
min-height: 250px;
transition: min-height 0.5s;
background-color: #0c3780;
display: flex;
width: 100%;
}
.faq-home .content > ul {
position: relative;
display: inline-block;
background-color: #0f46a1;
list-style: none;
margin: 0;
transition: opacity 0.4s;
padding: 0;
width: 50%;
}
.faq-home .content > ul li {
position: relative;
opacity: 1;
transition: background-color 0.3s, opacity 0.3s;
width: 100%;
}
.faq-home .content > ul li .faq-item__mobile {
position: relative;
display: none;
width: 100%;
height: 100%;
padding: 30px;
font-size: 0.9rem;
color: #c5caea;
transition: opacity 0.3s;
}
.faq-home .content > ul li .faq-item__mobile h2 {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin: 20px 0;
line-height: 1.3;
}
.faq-home .content > ul li .faq-item__mobile p {
line-height: 1.3;
}
.faq-home .content > ul li .faq-item__mobile p a {
color: #c5caea;
text-decoration: none;
border-bottom: 1px solid #c5caea;
transition: color 0.3s, border 0.3s;
}
.faq-home .content > ul li .faq-item__mobile p a:hover {
color: #6774c8;
border-bottom-color: #8d97d6;
}
.faq-home .content > ul li .faq-question {
position: relative;
padding: 15px 30px 15px 80px;
border-top: 1px solid rgba(197, 202, 234, 0.2);
background-color: transparent;
width: 100%;
cursor: pointer;
}
.faq-home .content > ul li .faq-question span {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 18px;
height: 18px;
border-radius: 100%;
background-color: #80ae4f;
line-height: 1;
font-size: 1.4rem;
}
.faq-home .content > ul li .faq-question span:after {
content: "+";
position: relative;
top: -2px;
color: white;
}
.faq-home .content > ul li .faq-question p {
margin: 0;
color: white;
font-size: 0.8rem;
line-height: 1.1;
font-weight: 700;
}
.faq-home .content > ul li .faq-question:hover {
background-color: #0e4197;
}
.faq-home .content > ul li:first-child .faq-question {
border-top: none;
}
.faq-home .content .faq-item {
position: relative;
display: none;
width: 50%;
height: 100%;
padding: 30px 60px;
font-size: 0.9rem;
color: #c5caea;
transition: opacity 0.3s;
}
.faq-home .content .faq-item h2 {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin: 20px 0;
line-height: 1.3;
}
.faq-home .content .faq-item p {
line-height: 1.3;
}
.faq-home .content .faq-item p a {
color: #c5caea;
text-decoration: none;
border-bottom: 1px solid #c5caea;
transition: color 0.3s, border 0.3s;
}
.faq-home .content .faq-item p a:hover {
color: #6774c8;
border-bottom-color: #8d97d6;
}
.faq-home .content .active {
display: inline-block;
background-color: #0c3780;
}
.faq-home .content .active .faq-question {
background-color: transparent !important;
}
.faq-home .content .active .faq-item__mobile {
display: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 20px;
}
@media screen and (max-width: 840px) {
.faq-home .content .active .faq-item__mobile {
display: inline-block;
}
}
.faq-home .content .active .faq-question span {
background-color: #f06292;
}
.faq-home .content .active .faq-question span:after {
content: "-";
top: -1px;
}
.left-icon--landing {
left: 4% !important;
top: unset !important;
}
@media screen and (max-width: 840px) {
.faq-block {
width: 100%;
}
.faq-block .faq-home {
width: 100%;
border-radius: 0;
}
.faq-block .faq-home .header {
text-align: center;
padding: 35px 30px;
}
.faq-block .faq-home .header h2 {
font-size: 1.3rem;
}
.faq-block .faq-home .header span {
width: 30px;
height: 30px;
padding: 5px;
}
.faq-block .faq-home .content > ul {
width: 100%;
}
.faq-block .faq-home .content > ul li .faq-question {
padding-left: 60px;
}
.faq-block .faq-home .content > ul li .faq-question span {
left: 20px;
}
.faq-block .faq-home .content > article {
display: none;
}
}
/*==========================================================================
* Header block - Overview
* ========================================================================== */
.overview-header {
/* Image slider
* ========================================================================== */
/* News at Zuiderbos Block
* ========================================================================== */
/* Header content
* ========================================================================== */
}
.overview-header .grid-row {
position: relative;
}
@media screen and (max-width: 1350px) {
.overview-header .grid-row.has-video .content {
display: block;
width: 85.7142857143%;
margin: 0 auto;
padding: 50px 0;
}
}
.overview-header .grid-col {
vertical-align: top;
}
.overview-header .image-slider {
margin-left: -8.3333333333%;
position: relative;
}
.overview-header .image-slider .youtube-video {
margin-bottom: 50px;
}
@media screen and (max-width: 1350px) {
.overview-header .image-slider .youtube-video {
display: none;
}
}
.overview-header .image-slider figure {
position: relative;
width: 100%;
padding-bottom: 65%;
}
.overview-header .image-slider figure .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 0.4s;
}
.overview-header .image-slider figure .image.active {
opacity: 1;
z-index: 2;
}
.overview-header .image-slider figure .image span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.overview-header .image-slider figure .image span.small {
display: none;
}
.overview-header .image-slider figure .image-slider-nav {
position: absolute;
right: 0;
bottom: 0;
z-index: 5;
width: 16.6666666667%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
background-color: rgba(0, 35, 130, 0.5);
}
.overview-header .image-slider figure .image-slider-nav .nav-button {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 50px;
width: 50%;
background-color: transparent;
transition: background-color 0.3s;
cursor: pointer;
}
.overview-header .image-slider figure .image-slider-nav .nav-button:after {
content: "";
position: relative;
top: 2px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
display: inline-block;
opacity: 0.7;
}
.overview-header .image-slider figure .image-slider-nav .nav-button.previous:after {
transform: rotate(180deg);
}
.overview-header .image-slider figure .image-slider-nav .nav-button:hover {
background-color: rgba(0, 35, 130, 0.3);
}
[class^=vso] .overview-header .image-slider figure .image-slider-nav {
background-color: rgba(37, 198, 218, 0.5);
}
[class^=vso] .overview-header .image-slider figure .image-slider-nav .nav-button:hover {
background-color: rgba(37, 198, 218, 0.3);
}
.overview-header .new-at-zuiderbos {
position: relative;
z-index: 5;
background-color: #f06292;
padding: 45px 4.1666666667%;
margin-top: -200px;
}
[class^=vso] .overview-header .new-at-zuiderbos {
background-color: #25c6da;
}
.overview-header .new-at-zuiderbos p {
font-size: 1.2rem;
color: white;
font-weight: 700;
margin: 0 0 35px;
}
.overview-header .new-at-zuiderbos ul {
list-style: none;
padding: 0;
margin: 0 0 35px;
font-size: 0.9rem;
line-height: 1.2;
}
.overview-header .new-at-zuiderbos ul li {
position: relative;
padding-left: 15px;
margin-bottom: 10px;
}
.overview-header .new-at-zuiderbos ul li a {
color: white;
text-decoration: none;
opacity: 1;
transition: opacity 0.2s;
}
.overview-header .new-at-zuiderbos ul li a:before {
content: "›";
position: absolute;
left: 0;
top: 0;
}
.overview-header .new-at-zuiderbos ul li a:hover {
opacity: 0.7;
}
.overview-header .new-at-zuiderbos > a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
margin: auto;
border: 1px solid white;
width: 180px;
height: 40px;
border-radius: 20px;
font-size: 1rem;
color: white;
font-weight: 700;
text-decoration: none;
opacity: 1;
transition: opacity 0.3s;
}
.overview-header .new-at-zuiderbos > a:after {
content: "";
position: relative;
top: 2px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 12px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.overview-header .new-at-zuiderbos > a:hover {
opacity: 0.7;
}
.overview-header .new-at-zuiderbos > a:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.overview-header .content h1 {
margin: 0 0 80px;
font-size: 2.5rem;
color: white;
font-weight: 700;
}
.overview-header .content .padding-block {
height: 60px;
}
[class^=foundation] .overview-header .content .padding-block {
height: 120px;
}
.overview-header .content .youtube-video {
display: none;
}
@media screen and (max-width: 1350px) {
.overview-header .content .youtube-video {
display: block;
}
}
.overview-header .content .text {
color: #b8d6e6;
margin-bottom: 20px;
font-size: 1rem;
}
.overview-header .content .text p {
color: #c5caea;
}
.overview-header .content .text a {
font-weight: bold;
color: #9ea8db;
}
.overview-header .content .text ul, .overview-header .content .text ol {
padding-left: 20px;
}
.overview-header .content .text ul li, .overview-header .content .text ol li {
color: #c5caea;
}
.overview-header .content .text ul, .overview-header .content .text ol {
padding-left: 20px;
list-style: none;
}
.overview-header .content .text ul li, .overview-header .content .text ol li {
position: relative;
padding-left: 20px;
color: #c5caea;
}
.overview-header .content .text ul li:before, .overview-header .content .text ol li:before {
content: "•";
position: absolute;
color: #c5caea;
font-size: 1.2rem;
line-height: 1;
left: -20px;
top: 3px;
}
.overview-header .content .text ol {
counter-reset: ol-counter;
}
.overview-header .content .text ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 6px;
}
.overview-header .content .page-links, .overview-header .content .page .main .relevant-pages, .overview-header .content .faq .main .relevant-pages, .overview-header .content .error-page .main .relevant-pages, .overview-header .content .contact .main .relevant-pages, .overview-header .content .actual .main .relevant-pages, .overview-header .content .calenderPage .main .relevant-pages, .overview-header .content .job .main .relevant-pages, .overview-header .content .reference .main .relevant-pages, .overview-header .content .news-detail .main .relevant-pages, .page .main .overview-header .content .relevant-pages, .faq .main .overview-header .content .relevant-pages, .error-page .main .overview-header .content .relevant-pages, .contact .main .overview-header .content .relevant-pages, .actual .main .overview-header .content .relevant-pages, .calenderPage .main .overview-header .content .relevant-pages, .job .main .overview-header .content .relevant-pages, .reference .main .overview-header .content .relevant-pages, .news-detail .main .overview-header .content .relevant-pages, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages, .overview-header .content .photo-album .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .overview-header .content .relevant-pages, .overview-header .content .references .relevant-pages-container .relevant-pages, .references .relevant-pages-container .overview-header .content .relevant-pages, .overview-header .content .news .relevant-pages-container .relevant-pages, .news .relevant-pages-container .overview-header .content .relevant-pages {
margin: 80px 0 40px;
}
.overview-header .content .page-links p, .overview-header .content .page .main .relevant-pages p, .overview-header .content .faq .main .relevant-pages p, .overview-header .content .error-page .main .relevant-pages p, .overview-header .content .contact .main .relevant-pages p, .overview-header .content .actual .main .relevant-pages p, .overview-header .content .calenderPage .main .relevant-pages p, .overview-header .content .job .main .relevant-pages p, .overview-header .content .reference .main .relevant-pages p, .overview-header .content .news-detail .main .relevant-pages p, .page .main .overview-header .content .relevant-pages p, .faq .main .overview-header .content .relevant-pages p, .error-page .main .overview-header .content .relevant-pages p, .contact .main .overview-header .content .relevant-pages p, .actual .main .overview-header .content .relevant-pages p, .calenderPage .main .overview-header .content .relevant-pages p, .job .main .overview-header .content .relevant-pages p, .reference .main .overview-header .content .relevant-pages p, .news-detail .main .overview-header .content .relevant-pages p, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages p, .overview-header .content .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container .overview-header .content .relevant-pages p, .overview-header .content .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container .overview-header .content .relevant-pages p, .overview-header .content .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container .overview-header .content .relevant-pages p {
font-size: 0.9rem;
font-weight: 700;
color: white;
opacity: 0.8;
}
.overview-header .content .page-links ul, .overview-header .content .page .main .relevant-pages ul, .overview-header .content .faq .main .relevant-pages ul, .overview-header .content .error-page .main .relevant-pages ul, .overview-header .content .contact .main .relevant-pages ul, .overview-header .content .actual .main .relevant-pages ul, .overview-header .content .calenderPage .main .relevant-pages ul, .overview-header .content .job .main .relevant-pages ul, .overview-header .content .reference .main .relevant-pages ul, .overview-header .content .news-detail .main .relevant-pages ul, .page .main .overview-header .content .relevant-pages ul, .faq .main .overview-header .content .relevant-pages ul, .error-page .main .overview-header .content .relevant-pages ul, .contact .main .overview-header .content .relevant-pages ul, .actual .main .overview-header .content .relevant-pages ul, .calenderPage .main .overview-header .content .relevant-pages ul, .job .main .overview-header .content .relevant-pages ul, .reference .main .overview-header .content .relevant-pages ul, .news-detail .main .overview-header .content .relevant-pages ul, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages ul, .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul, .photo-album .relevant-pages-container .overview-header .content .relevant-pages ul, .overview-header .content .references .relevant-pages-container .relevant-pages ul, .references .relevant-pages-container .overview-header .content .relevant-pages ul, .overview-header .content .news .relevant-pages-container .relevant-pages ul, .news .relevant-pages-container .overview-header .content .relevant-pages ul {
display: inline-block;
vertical-align: top;
width: 49%;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.775rem;
line-height: 1.2;
}
.overview-header .content .page-links ul li, .overview-header .content .page .main .relevant-pages ul li, .overview-header .content .faq .main .relevant-pages ul li, .overview-header .content .error-page .main .relevant-pages ul li, .overview-header .content .contact .main .relevant-pages ul li, .overview-header .content .actual .main .relevant-pages ul li, .overview-header .content .calenderPage .main .relevant-pages ul li, .overview-header .content .job .main .relevant-pages ul li, .overview-header .content .reference .main .relevant-pages ul li, .overview-header .content .news-detail .main .relevant-pages ul li, .page .main .overview-header .content .relevant-pages ul li, .faq .main .overview-header .content .relevant-pages ul li, .error-page .main .overview-header .content .relevant-pages ul li, .contact .main .overview-header .content .relevant-pages ul li, .actual .main .overview-header .content .relevant-pages ul li, .calenderPage .main .overview-header .content .relevant-pages ul li, .job .main .overview-header .content .relevant-pages ul li, .reference .main .overview-header .content .relevant-pages ul li, .news-detail .main .overview-header .content .relevant-pages ul li, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages ul li, .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li, .photo-album .relevant-pages-container .overview-header .content .relevant-pages ul li, .overview-header .content .references .relevant-pages-container .relevant-pages ul li, .references .relevant-pages-container .overview-header .content .relevant-pages ul li, .overview-header .content .news .relevant-pages-container .relevant-pages ul li, .news .relevant-pages-container .overview-header .content .relevant-pages ul li {
position: relative;
padding-left: 15px;
margin-bottom: 10px;
}
.overview-header .content .page-links ul li a, .overview-header .content .page .main .relevant-pages ul li a, .overview-header .content .faq .main .relevant-pages ul li a, .overview-header .content .error-page .main .relevant-pages ul li a, .overview-header .content .contact .main .relevant-pages ul li a, .overview-header .content .actual .main .relevant-pages ul li a, .overview-header .content .calenderPage .main .relevant-pages ul li a, .overview-header .content .job .main .relevant-pages ul li a, .overview-header .content .reference .main .relevant-pages ul li a, .overview-header .content .news-detail .main .relevant-pages ul li a, .page .main .overview-header .content .relevant-pages ul li a, .faq .main .overview-header .content .relevant-pages ul li a, .error-page .main .overview-header .content .relevant-pages ul li a, .contact .main .overview-header .content .relevant-pages ul li a, .actual .main .overview-header .content .relevant-pages ul li a, .calenderPage .main .overview-header .content .relevant-pages ul li a, .job .main .overview-header .content .relevant-pages ul li a, .reference .main .overview-header .content .relevant-pages ul li a, .news-detail .main .overview-header .content .relevant-pages ul li a, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages ul li a, .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container .overview-header .content .relevant-pages ul li a, .overview-header .content .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container .overview-header .content .relevant-pages ul li a, .overview-header .content .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container .overview-header .content .relevant-pages ul li a {
color: #4fc2f8;
text-decoration: none;
transition: color 0.2s;
}
.overview-header .content .page-links ul li a:before, .overview-header .content .page .main .relevant-pages ul li a:before, .overview-header .content .faq .main .relevant-pages ul li a:before, .overview-header .content .error-page .main .relevant-pages ul li a:before, .overview-header .content .contact .main .relevant-pages ul li a:before, .overview-header .content .actual .main .relevant-pages ul li a:before, .overview-header .content .calenderPage .main .relevant-pages ul li a:before, .overview-header .content .job .main .relevant-pages ul li a:before, .overview-header .content .reference .main .relevant-pages ul li a:before, .overview-header .content .news-detail .main .relevant-pages ul li a:before, .page .main .overview-header .content .relevant-pages ul li a:before, .faq .main .overview-header .content .relevant-pages ul li a:before, .error-page .main .overview-header .content .relevant-pages ul li a:before, .contact .main .overview-header .content .relevant-pages ul li a:before, .actual .main .overview-header .content .relevant-pages ul li a:before, .calenderPage .main .overview-header .content .relevant-pages ul li a:before, .job .main .overview-header .content .relevant-pages ul li a:before, .reference .main .overview-header .content .relevant-pages ul li a:before, .news-detail .main .overview-header .content .relevant-pages ul li a:before, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li a:before, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages ul li a:before, .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li a:before, .photo-album .relevant-pages-container .overview-header .content .relevant-pages ul li a:before, .overview-header .content .references .relevant-pages-container .relevant-pages ul li a:before, .references .relevant-pages-container .overview-header .content .relevant-pages ul li a:before, .overview-header .content .news .relevant-pages-container .relevant-pages ul li a:before, .news .relevant-pages-container .overview-header .content .relevant-pages ul li a:before {
content: "›";
position: absolute;
left: 0;
top: 0;
}
.overview-header .content .page-links ul li a:hover, .overview-header .content .page .main .relevant-pages ul li a:hover, .overview-header .content .faq .main .relevant-pages ul li a:hover, .overview-header .content .error-page .main .relevant-pages ul li a:hover, .overview-header .content .contact .main .relevant-pages ul li a:hover, .overview-header .content .actual .main .relevant-pages ul li a:hover, .overview-header .content .calenderPage .main .relevant-pages ul li a:hover, .overview-header .content .job .main .relevant-pages ul li a:hover, .overview-header .content .reference .main .relevant-pages ul li a:hover, .overview-header .content .news-detail .main .relevant-pages ul li a:hover, .page .main .overview-header .content .relevant-pages ul li a:hover, .faq .main .overview-header .content .relevant-pages ul li a:hover, .error-page .main .overview-header .content .relevant-pages ul li a:hover, .contact .main .overview-header .content .relevant-pages ul li a:hover, .actual .main .overview-header .content .relevant-pages ul li a:hover, .calenderPage .main .overview-header .content .relevant-pages ul li a:hover, .job .main .overview-header .content .relevant-pages ul li a:hover, .reference .main .overview-header .content .relevant-pages ul li a:hover, .news-detail .main .overview-header .content .relevant-pages ul li a:hover, .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li a:hover, .photo-albums .relevant-pages-container .overview-header .content .relevant-pages ul li a:hover, .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li a:hover, .photo-album .relevant-pages-container .overview-header .content .relevant-pages ul li a:hover, .overview-header .content .references .relevant-pages-container .relevant-pages ul li a:hover, .references .relevant-pages-container .overview-header .content .relevant-pages ul li a:hover, .overview-header .content .news .relevant-pages-container .relevant-pages ul li a:hover, .news .relevant-pages-container .overview-header .content .relevant-pages ul li a:hover {
color: #0996d8;
}
[class^=vso] .overview-header .content .text p {
color: #B2EBF2;
}
[class^=vso] .overview-header .content .text a {
color: #0098a6;
}
[class^=vso] .overview-header .content .text ul li, [class^=vso] .overview-header .content .text ol li {
color: #B2EBF2;
}
[class^=vso] .overview-header .content .text ul li:before, [class^=vso] .overview-header .content .text ol li:before {
color: #B2EBF2;
}
[class^=vso] .overview-header .content .page-links p, [class^=vso] .overview-header .content .page .main .relevant-pages p, [class^=vso] .overview-header .content .faq .main .relevant-pages p, [class^=vso] .overview-header .content .error-page .main .relevant-pages p, [class^=vso] .overview-header .content .contact .main .relevant-pages p, [class^=vso] .overview-header .content .actual .main .relevant-pages p, [class^=vso] .overview-header .content .calenderPage .main .relevant-pages p, [class^=vso] .overview-header .content .job .main .relevant-pages p, [class^=vso] .overview-header .content .reference .main .relevant-pages p, [class^=vso] .overview-header .content .news-detail .main .relevant-pages p, .page .main [class^=vso] .overview-header .content .relevant-pages p, .faq .main [class^=vso] .overview-header .content .relevant-pages p, .error-page .main [class^=vso] .overview-header .content .relevant-pages p, .contact .main [class^=vso] .overview-header .content .relevant-pages p, .actual .main [class^=vso] .overview-header .content .relevant-pages p, .calenderPage .main [class^=vso] .overview-header .content .relevant-pages p, .job .main [class^=vso] .overview-header .content .relevant-pages p, .reference .main [class^=vso] .overview-header .content .relevant-pages p, .news-detail .main [class^=vso] .overview-header .content .relevant-pages p, [class^=vso] .overview-header .content .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages p, [class^=vso] .overview-header .content .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages p, [class^=vso] .overview-header .content .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages p, [class^=vso] .overview-header .content .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages p {
color: #25c6da;
}
[class^=vso] .overview-header .content .page-links ul li a, [class^=vso] .overview-header .content .page .main .relevant-pages ul li a, [class^=vso] .overview-header .content .faq .main .relevant-pages ul li a, [class^=vso] .overview-header .content .error-page .main .relevant-pages ul li a, [class^=vso] .overview-header .content .contact .main .relevant-pages ul li a, [class^=vso] .overview-header .content .actual .main .relevant-pages ul li a, [class^=vso] .overview-header .content .calenderPage .main .relevant-pages ul li a, [class^=vso] .overview-header .content .job .main .relevant-pages ul li a, [class^=vso] .overview-header .content .reference .main .relevant-pages ul li a, [class^=vso] .overview-header .content .news-detail .main .relevant-pages ul li a, .page .main [class^=vso] .overview-header .content .relevant-pages ul li a, .faq .main [class^=vso] .overview-header .content .relevant-pages ul li a, .error-page .main [class^=vso] .overview-header .content .relevant-pages ul li a, .contact .main [class^=vso] .overview-header .content .relevant-pages ul li a, .actual .main [class^=vso] .overview-header .content .relevant-pages ul li a, .calenderPage .main [class^=vso] .overview-header .content .relevant-pages ul li a, .job .main [class^=vso] .overview-header .content .relevant-pages ul li a, .reference .main [class^=vso] .overview-header .content .relevant-pages ul li a, .news-detail .main [class^=vso] .overview-header .content .relevant-pages ul li a, [class^=vso] .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a, [class^=vso] .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a, [class^=vso] .overview-header .content .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a, [class^=vso] .overview-header .content .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a {
color: white;
}
[class^=vso] .overview-header .content .page-links ul li a:hover, [class^=vso] .overview-header .content .page .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .faq .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .error-page .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .contact .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .actual .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .calenderPage .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .job .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .reference .main .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .news-detail .main .relevant-pages ul li a:hover, .page .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .faq .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .error-page .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .contact .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .actual .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .calenderPage .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .job .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .reference .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, .news-detail .main [class^=vso] .overview-header .content .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .photo-albums .relevant-pages-container .relevant-pages ul li a:hover, .photo-albums .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .photo-album .relevant-pages-container .relevant-pages ul li a:hover, .photo-album .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .references .relevant-pages-container .relevant-pages ul li a:hover, .references .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a:hover, [class^=vso] .overview-header .content .news .relevant-pages-container .relevant-pages ul li a:hover, .news .relevant-pages-container [class^=vso] .overview-header .content .relevant-pages ul li a:hover {
color: rgba(255, 255, 255, 0.7);
}
[class^=services] .overview-header .content .text p, [class^=foundation] .overview-header .content .text p, [class^=jobs] .overview-header .content .text p, [class^=academy] .overview-header .content .text p {
color: #b8d6e6;
}
[class^=services] .overview-header .content .text a, [class^=foundation] .overview-header .content .text a, [class^=jobs] .overview-header .content .text a, [class^=academy] .overview-header .content .text a {
color: white;
}
[class^=services] .overview-header .content .text ul li, [class^=services] .overview-header .content .text ol li, [class^=foundation] .overview-header .content .text ul li, [class^=foundation] .overview-header .content .text ol li, [class^=jobs] .overview-header .content .text ul li, [class^=jobs] .overview-header .content .text ol li, [class^=academy] .overview-header .content .text ul li, [class^=academy] .overview-header .content .text ol li {
color: #b8d6e6;
}
[class^=services] .overview-header .content .text ul li:before, [class^=services] .overview-header .content .text ol li:before, [class^=foundation] .overview-header .content .text ul li:before, [class^=foundation] .overview-header .content .text ol li:before, [class^=jobs] .overview-header .content .text ul li:before, [class^=jobs] .overview-header .content .text ol li:before, [class^=academy] .overview-header .content .text ul li:before, [class^=academy] .overview-header .content .text ol li:before {
color: white;
}
[class^=services] .overview-header .content .page-links p, [class^=services] .overview-header .content .relevant-pages p, [class^=foundation] .overview-header .content .page-links p, [class^=foundation] .overview-header .content .relevant-pages p, [class^=jobs] .overview-header .content .page-links p, [class^=jobs] .overview-header .content .relevant-pages p, [class^=academy] .overview-header .content .page-links p, [class^=academy] .overview-header .content .relevant-pages p {
color: #a1cee6;
}
[class^=services] .overview-header .content .page-links ul li a, [class^=services] .overview-header .content .relevant-pages ul li a, [class^=foundation] .overview-header .content .page-links ul li a, [class^=foundation] .overview-header .content .relevant-pages ul li a, [class^=jobs] .overview-header .content .page-links ul li a, [class^=jobs] .overview-header .content .relevant-pages ul li a, [class^=academy] .overview-header .content .page-links ul li a, [class^=academy] .overview-header .content .relevant-pages ul li a {
color: white;
}
[class^=services] .overview-header .content .page-links ul li a:hover, [class^=services] .overview-header .content .relevant-pages ul li a:hover, [class^=foundation] .overview-header .content .page-links ul li a:hover, [class^=foundation] .overview-header .content .relevant-pages ul li a:hover, [class^=jobs] .overview-header .content .page-links ul li a:hover, [class^=jobs] .overview-header .content .relevant-pages ul li a:hover, [class^=academy] .overview-header .content .page-links ul li a:hover, [class^=academy] .overview-header .content .relevant-pages ul li a:hover {
color: rgba(255, 255, 255, 0.7);
}
.overview-header .icon {
position: absolute;
z-index: 40;
right: -30px;
bottom: -60px;
width: 60px;
height: 143px;
}
.overview-header .icon:after {
content: "";
display: block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -256px -78px no-repeat;
background-size: 502px 423px;
width: 60px;
height: 143px;
}
[class^=vso] .overview-header .icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -379px -78px no-repeat;
background-size: 502px 423px;
width: 60px;
height: 143px;
}
@media screen and (max-width: 1000px) {
.overview-header .content {
width: 50%;
}
}
.overview-after-links {
position: relative;
}
.overview-after-links:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: url("/img/forest_bottom.jpg");
background-position: center right;
background-size: cover;
}
.overview-after-links .page-links, .overview-after-links .page .main .relevant-pages, .overview-after-links .faq .main .relevant-pages, .overview-after-links .error-page .main .relevant-pages, .overview-after-links .contact .main .relevant-pages, .overview-after-links .actual .main .relevant-pages, .overview-after-links .calenderPage .main .relevant-pages, .overview-after-links .job .main .relevant-pages, .overview-after-links .reference .main .relevant-pages, .overview-after-links .news-detail .main .relevant-pages, .page .main .overview-after-links .relevant-pages, .faq .main .overview-after-links .relevant-pages, .error-page .main .overview-after-links .relevant-pages, .contact .main .overview-after-links .relevant-pages, .actual .main .overview-after-links .relevant-pages, .calenderPage .main .overview-after-links .relevant-pages, .job .main .overview-after-links .relevant-pages, .reference .main .overview-after-links .relevant-pages, .news-detail .main .overview-after-links .relevant-pages, .overview-after-links .photo-albums .relevant-pages-container .relevant-pages, .photo-albums .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .photo-album .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .references .relevant-pages-container .relevant-pages, .references .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .news .relevant-pages-container .relevant-pages, .news .relevant-pages-container .overview-after-links .relevant-pages {
padding: 40px 0;
}
.overview-after-links .page-links p, .overview-after-links .page .main .relevant-pages p, .overview-after-links .faq .main .relevant-pages p, .overview-after-links .error-page .main .relevant-pages p, .overview-after-links .contact .main .relevant-pages p, .overview-after-links .actual .main .relevant-pages p, .overview-after-links .calenderPage .main .relevant-pages p, .overview-after-links .job .main .relevant-pages p, .overview-after-links .reference .main .relevant-pages p, .overview-after-links .news-detail .main .relevant-pages p, .page .main .overview-after-links .relevant-pages p, .faq .main .overview-after-links .relevant-pages p, .error-page .main .overview-after-links .relevant-pages p, .contact .main .overview-after-links .relevant-pages p, .actual .main .overview-after-links .relevant-pages p, .calenderPage .main .overview-after-links .relevant-pages p, .job .main .overview-after-links .relevant-pages p, .reference .main .overview-after-links .relevant-pages p, .news-detail .main .overview-after-links .relevant-pages p, .overview-after-links .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container .overview-after-links .relevant-pages p, .overview-after-links .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container .overview-after-links .relevant-pages p, .overview-after-links .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container .overview-after-links .relevant-pages p, .overview-after-links .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container .overview-after-links .relevant-pages p {
font-size: 1.1rem;
}
.overview-after-links .page-links ul, .overview-after-links .page .main .relevant-pages ul, .overview-after-links .faq .main .relevant-pages ul, .overview-after-links .error-page .main .relevant-pages ul, .overview-after-links .contact .main .relevant-pages ul, .overview-after-links .actual .main .relevant-pages ul, .overview-after-links .calenderPage .main .relevant-pages ul, .overview-after-links .job .main .relevant-pages ul, .overview-after-links .reference .main .relevant-pages ul, .overview-after-links .news-detail .main .relevant-pages ul, .page .main .overview-after-links .relevant-pages ul, .faq .main .overview-after-links .relevant-pages ul, .error-page .main .overview-after-links .relevant-pages ul, .contact .main .overview-after-links .relevant-pages ul, .actual .main .overview-after-links .relevant-pages ul, .calenderPage .main .overview-after-links .relevant-pages ul, .job .main .overview-after-links .relevant-pages ul, .reference .main .overview-after-links .relevant-pages ul, .news-detail .main .overview-after-links .relevant-pages ul, .overview-after-links .photo-albums .relevant-pages-container .relevant-pages ul, .photo-albums .relevant-pages-container .overview-after-links .relevant-pages ul, .overview-after-links .photo-album .relevant-pages-container .relevant-pages ul, .photo-album .relevant-pages-container .overview-after-links .relevant-pages ul, .overview-after-links .references .relevant-pages-container .relevant-pages ul, .references .relevant-pages-container .overview-after-links .relevant-pages ul, .overview-after-links .news .relevant-pages-container .relevant-pages ul, .news .relevant-pages-container .overview-after-links .relevant-pages ul {
font-size: 0.9rem;
}
@media screen and (max-width: 1000px) {
.overview-after-links .page-links, .overview-after-links .page .main .relevant-pages, .overview-after-links .faq .main .relevant-pages, .overview-after-links .error-page .main .relevant-pages, .overview-after-links .contact .main .relevant-pages, .overview-after-links .actual .main .relevant-pages, .overview-after-links .calenderPage .main .relevant-pages, .overview-after-links .job .main .relevant-pages, .overview-after-links .reference .main .relevant-pages, .overview-after-links .news-detail .main .relevant-pages, .page .main .overview-after-links .relevant-pages, .faq .main .overview-after-links .relevant-pages, .error-page .main .overview-after-links .relevant-pages, .contact .main .overview-after-links .relevant-pages, .actual .main .overview-after-links .relevant-pages, .calenderPage .main .overview-after-links .relevant-pages, .job .main .overview-after-links .relevant-pages, .reference .main .overview-after-links .relevant-pages, .news-detail .main .overview-after-links .relevant-pages, .overview-after-links .photo-albums .relevant-pages-container .relevant-pages, .photo-albums .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .photo-album .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .references .relevant-pages-container .relevant-pages, .references .relevant-pages-container .overview-after-links .relevant-pages, .overview-after-links .news .relevant-pages-container .relevant-pages, .news .relevant-pages-container .overview-after-links .relevant-pages {
width: 58.3333333333%;
}
.overview-after-links:after {
width: 33.3333333333%;
}
}
.page-links, .page .main .relevant-pages, .faq .main .relevant-pages, .error-page .main .relevant-pages, .contact .main .relevant-pages, .actual .main .relevant-pages, .calenderPage .main .relevant-pages, .job .main .relevant-pages, .reference .main .relevant-pages, .news-detail .main .relevant-pages, .photo-albums .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .relevant-pages, .references .relevant-pages-container .relevant-pages, .news .relevant-pages-container .relevant-pages, .relevant-pages {
padding: 80px 0;
}
.page-links p, .page .main .relevant-pages p, .faq .main .relevant-pages p, .error-page .main .relevant-pages p, .contact .main .relevant-pages p, .actual .main .relevant-pages p, .calenderPage .main .relevant-pages p, .job .main .relevant-pages p, .reference .main .relevant-pages p, .news-detail .main .relevant-pages p, .photo-albums .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container .relevant-pages p, .references .relevant-pages-container .relevant-pages p, .news .relevant-pages-container .relevant-pages p, .relevant-pages p {
font-size: 0.9rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 15px;
}
.page-links ul, .page .main .relevant-pages ul, .faq .main .relevant-pages ul, .error-page .main .relevant-pages ul, .contact .main .relevant-pages ul, .actual .main .relevant-pages ul, .calenderPage .main .relevant-pages ul, .job .main .relevant-pages ul, .reference .main .relevant-pages ul, .news-detail .main .relevant-pages ul, .photo-albums .relevant-pages-container .relevant-pages ul, .photo-album .relevant-pages-container .relevant-pages ul, .references .relevant-pages-container .relevant-pages ul, .news .relevant-pages-container .relevant-pages ul, .relevant-pages ul {
display: inline-block;
vertical-align: top;
width: 49%;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.825rem;
line-height: 1.2;
}
.page-links ul li, .page .main .relevant-pages ul li, .faq .main .relevant-pages ul li, .error-page .main .relevant-pages ul li, .contact .main .relevant-pages ul li, .actual .main .relevant-pages ul li, .calenderPage .main .relevant-pages ul li, .job .main .relevant-pages ul li, .reference .main .relevant-pages ul li, .news-detail .main .relevant-pages ul li, .photo-albums .relevant-pages-container .relevant-pages ul li, .photo-album .relevant-pages-container .relevant-pages ul li, .references .relevant-pages-container .relevant-pages ul li, .news .relevant-pages-container .relevant-pages ul li, .relevant-pages ul li {
position: relative;
padding-left: 15px;
margin-bottom: 10px;
}
.page-links ul li a, .page .main .relevant-pages ul li a, .faq .main .relevant-pages ul li a, .error-page .main .relevant-pages ul li a, .contact .main .relevant-pages ul li a, .actual .main .relevant-pages ul li a, .calenderPage .main .relevant-pages ul li a, .job .main .relevant-pages ul li a, .reference .main .relevant-pages ul li a, .news-detail .main .relevant-pages ul li a, .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container .relevant-pages ul li a, .relevant-pages ul li a {
color: #1d88e6;
text-decoration: none;
transition: color 0.2s;
}
.page-links ul li a:before, .page .main .relevant-pages ul li a:before, .faq .main .relevant-pages ul li a:before, .error-page .main .relevant-pages ul li a:before, .contact .main .relevant-pages ul li a:before, .actual .main .relevant-pages ul li a:before, .calenderPage .main .relevant-pages ul li a:before, .job .main .relevant-pages ul li a:before, .reference .main .relevant-pages ul li a:before, .news-detail .main .relevant-pages ul li a:before, .photo-albums .relevant-pages-container .relevant-pages ul li a:before, .photo-album .relevant-pages-container .relevant-pages ul li a:before, .references .relevant-pages-container .relevant-pages ul li a:before, .news .relevant-pages-container .relevant-pages ul li a:before, .relevant-pages ul li a:before {
content: "›";
position: absolute;
left: 0;
top: 0;
}
.page-links ul li a:hover, .page .main .relevant-pages ul li a:hover, .faq .main .relevant-pages ul li a:hover, .error-page .main .relevant-pages ul li a:hover, .contact .main .relevant-pages ul li a:hover, .actual .main .relevant-pages ul li a:hover, .calenderPage .main .relevant-pages ul li a:hover, .job .main .relevant-pages ul li a:hover, .reference .main .relevant-pages ul li a:hover, .news-detail .main .relevant-pages ul li a:hover, .photo-albums .relevant-pages-container .relevant-pages ul li a:hover, .photo-album .relevant-pages-container .relevant-pages ul li a:hover, .references .relevant-pages-container .relevant-pages ul li a:hover, .news .relevant-pages-container .relevant-pages ul li a:hover, .relevant-pages ul li a:hover {
color: #10538d;
}
.page-links ul li a.active, .page .main .relevant-pages ul li a.active, .faq .main .relevant-pages ul li a.active, .error-page .main .relevant-pages ul li a.active, .contact .main .relevant-pages ul li a.active, .actual .main .relevant-pages ul li a.active, .calenderPage .main .relevant-pages ul li a.active, .job .main .relevant-pages ul li a.active, .reference .main .relevant-pages ul li a.active, .news-detail .main .relevant-pages ul li a.active, .photo-albums .relevant-pages-container .relevant-pages ul li a.active, .photo-album .relevant-pages-container .relevant-pages ul li a.active, .references .relevant-pages-container .relevant-pages ul li a.active, .news .relevant-pages-container .relevant-pages ul li a.active, .relevant-pages ul li a.active {
font-weight: 700;
color: #0f46a1;
}
[class^=vso] .page-links p, [class^=vso] .page .main .relevant-pages p, [class^=vso] .faq .main .relevant-pages p, [class^=vso] .error-page .main .relevant-pages p, [class^=vso] .contact .main .relevant-pages p, [class^=vso] .actual .main .relevant-pages p, [class^=vso] .calenderPage .main .relevant-pages p, [class^=vso] .job .main .relevant-pages p, [class^=vso] .reference .main .relevant-pages p, [class^=vso] .news-detail .main .relevant-pages p, .page .main [class^=vso] .relevant-pages p, .faq .main [class^=vso] .relevant-pages p, .error-page .main [class^=vso] .relevant-pages p, .contact .main [class^=vso] .relevant-pages p, .actual .main [class^=vso] .relevant-pages p, .calenderPage .main [class^=vso] .relevant-pages p, .job .main [class^=vso] .relevant-pages p, .reference .main [class^=vso] .relevant-pages p, .news-detail .main [class^=vso] .relevant-pages p, [class^=vso] .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=vso] .relevant-pages p, [class^=vso] .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=vso] .relevant-pages p, [class^=vso] .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=vso] .relevant-pages p, [class^=vso] .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=vso] .relevant-pages p, [class^=vso] .relevant-pages p {
color: #0098a6;
}
[class^=vso] .page-links ul li a, [class^=vso] .page .main .relevant-pages ul li a, [class^=vso] .faq .main .relevant-pages ul li a, [class^=vso] .error-page .main .relevant-pages ul li a, [class^=vso] .contact .main .relevant-pages ul li a, [class^=vso] .actual .main .relevant-pages ul li a, [class^=vso] .calenderPage .main .relevant-pages ul li a, [class^=vso] .job .main .relevant-pages ul li a, [class^=vso] .reference .main .relevant-pages ul li a, [class^=vso] .news-detail .main .relevant-pages ul li a, .page .main [class^=vso] .relevant-pages ul li a, .faq .main [class^=vso] .relevant-pages ul li a, .error-page .main [class^=vso] .relevant-pages ul li a, .contact .main [class^=vso] .relevant-pages ul li a, .actual .main [class^=vso] .relevant-pages ul li a, .calenderPage .main [class^=vso] .relevant-pages ul li a, .job .main [class^=vso] .relevant-pages ul li a, .reference .main [class^=vso] .relevant-pages ul li a, .news-detail .main [class^=vso] .relevant-pages ul li a, [class^=vso] .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=vso] .relevant-pages ul li a, [class^=vso] .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=vso] .relevant-pages ul li a, [class^=vso] .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=vso] .relevant-pages ul li a, [class^=vso] .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=vso] .relevant-pages ul li a, [class^=vso] .relevant-pages ul li a {
color: #25c6da;
}
[class^=vso] .page-links ul li a:hover, [class^=vso] .relevant-pages ul li a:hover {
color: #6be9f2;
}
[class^=vso] .page-links ul li a.active, [class^=vso] .relevant-pages ul li a.active {
color: #0098a6;
}
[class^=services] .page-links p, [class^=services] .page .main .relevant-pages p, [class^=services] .faq .main .relevant-pages p, [class^=services] .error-page .main .relevant-pages p, [class^=services] .contact .main .relevant-pages p, [class^=services] .actual .main .relevant-pages p, [class^=services] .calenderPage .main .relevant-pages p, [class^=services] .job .main .relevant-pages p, [class^=services] .reference .main .relevant-pages p, [class^=services] .news-detail .main .relevant-pages p, .page .main [class^=services] .relevant-pages p, .faq .main [class^=services] .relevant-pages p, .error-page .main [class^=services] .relevant-pages p, .contact .main [class^=services] .relevant-pages p, .actual .main [class^=services] .relevant-pages p, .calenderPage .main [class^=services] .relevant-pages p, .job .main [class^=services] .relevant-pages p, .reference .main [class^=services] .relevant-pages p, .news-detail .main [class^=services] .relevant-pages p, [class^=services] .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=services] .relevant-pages p, [class^=services] .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=services] .relevant-pages p, [class^=services] .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=services] .relevant-pages p, [class^=services] .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=services] .relevant-pages p, [class^=foundation] .page-links p, [class^=foundation] .page .main .relevant-pages p, [class^=foundation] .faq .main .relevant-pages p, [class^=foundation] .error-page .main .relevant-pages p, [class^=foundation] .contact .main .relevant-pages p, [class^=foundation] .actual .main .relevant-pages p, [class^=foundation] .calenderPage .main .relevant-pages p, [class^=foundation] .job .main .relevant-pages p, [class^=foundation] .reference .main .relevant-pages p, [class^=foundation] .news-detail .main .relevant-pages p, .page .main [class^=foundation] .relevant-pages p, .faq .main [class^=foundation] .relevant-pages p, .error-page .main [class^=foundation] .relevant-pages p, .contact .main [class^=foundation] .relevant-pages p, .actual .main [class^=foundation] .relevant-pages p, .calenderPage .main [class^=foundation] .relevant-pages p, .job .main [class^=foundation] .relevant-pages p, .reference .main [class^=foundation] .relevant-pages p, .news-detail .main [class^=foundation] .relevant-pages p, [class^=foundation] .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=foundation] .relevant-pages p, [class^=foundation] .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=foundation] .relevant-pages p, [class^=foundation] .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=foundation] .relevant-pages p, [class^=foundation] .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=foundation] .relevant-pages p, [class^=jobs] .page-links p, [class^=jobs] .page .main .relevant-pages p, [class^=jobs] .faq .main .relevant-pages p, [class^=jobs] .error-page .main .relevant-pages p, [class^=jobs] .contact .main .relevant-pages p, [class^=jobs] .actual .main .relevant-pages p, [class^=jobs] .calenderPage .main .relevant-pages p, [class^=jobs] .job .main .relevant-pages p, [class^=jobs] .reference .main .relevant-pages p, [class^=jobs] .news-detail .main .relevant-pages p, .page .main [class^=jobs] .relevant-pages p, .faq .main [class^=jobs] .relevant-pages p, .error-page .main [class^=jobs] .relevant-pages p, .contact .main [class^=jobs] .relevant-pages p, .actual .main [class^=jobs] .relevant-pages p, .calenderPage .main [class^=jobs] .relevant-pages p, .job .main [class^=jobs] .relevant-pages p, .reference .main [class^=jobs] .relevant-pages p, .news-detail .main [class^=jobs] .relevant-pages p, [class^=jobs] .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=jobs] .relevant-pages p, [class^=jobs] .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=jobs] .relevant-pages p, [class^=jobs] .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=jobs] .relevant-pages p, [class^=jobs] .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=jobs] .relevant-pages p, [class^=academy] .page-links p, [class^=academy] .page .main .relevant-pages p, [class^=academy] .faq .main .relevant-pages p, [class^=academy] .error-page .main .relevant-pages p, [class^=academy] .contact .main .relevant-pages p, [class^=academy] .actual .main .relevant-pages p, [class^=academy] .calenderPage .main .relevant-pages p, [class^=academy] .job .main .relevant-pages p, [class^=academy] .reference .main .relevant-pages p, [class^=academy] .news-detail .main .relevant-pages p, .page .main [class^=academy] .relevant-pages p, .faq .main [class^=academy] .relevant-pages p, .error-page .main [class^=academy] .relevant-pages p, .contact .main [class^=academy] .relevant-pages p, .actual .main [class^=academy] .relevant-pages p, .calenderPage .main [class^=academy] .relevant-pages p, .job .main [class^=academy] .relevant-pages p, .reference .main [class^=academy] .relevant-pages p, .news-detail .main [class^=academy] .relevant-pages p, [class^=academy] .photo-albums .relevant-pages-container .relevant-pages p, .photo-albums .relevant-pages-container [class^=academy] .relevant-pages p, [class^=academy] .photo-album .relevant-pages-container .relevant-pages p, .photo-album .relevant-pages-container [class^=academy] .relevant-pages p, [class^=academy] .references .relevant-pages-container .relevant-pages p, .references .relevant-pages-container [class^=academy] .relevant-pages p, [class^=academy] .news .relevant-pages-container .relevant-pages p, .news .relevant-pages-container [class^=academy] .relevant-pages p, [class^=services] .relevant-pages p, [class^=foundation] .relevant-pages p, [class^=jobs] .relevant-pages p, [class^=academy] .relevant-pages p {
color: #4e7f99;
}
[class^=services] .page-links ul li a, [class^=services] .page .main .relevant-pages ul li a, [class^=services] .faq .main .relevant-pages ul li a, [class^=services] .error-page .main .relevant-pages ul li a, [class^=services] .contact .main .relevant-pages ul li a, [class^=services] .actual .main .relevant-pages ul li a, [class^=services] .calenderPage .main .relevant-pages ul li a, [class^=services] .job .main .relevant-pages ul li a, [class^=services] .reference .main .relevant-pages ul li a, [class^=services] .news-detail .main .relevant-pages ul li a, .page .main [class^=services] .relevant-pages ul li a, .faq .main [class^=services] .relevant-pages ul li a, .error-page .main [class^=services] .relevant-pages ul li a, .contact .main [class^=services] .relevant-pages ul li a, .actual .main [class^=services] .relevant-pages ul li a, .calenderPage .main [class^=services] .relevant-pages ul li a, .job .main [class^=services] .relevant-pages ul li a, .reference .main [class^=services] .relevant-pages ul li a, .news-detail .main [class^=services] .relevant-pages ul li a, [class^=services] .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=services] .relevant-pages ul li a, [class^=services] .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=services] .relevant-pages ul li a, [class^=services] .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=services] .relevant-pages ul li a, [class^=services] .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=services] .relevant-pages ul li a, [class^=foundation] .page-links ul li a, [class^=foundation] .page .main .relevant-pages ul li a, [class^=foundation] .faq .main .relevant-pages ul li a, [class^=foundation] .error-page .main .relevant-pages ul li a, [class^=foundation] .contact .main .relevant-pages ul li a, [class^=foundation] .actual .main .relevant-pages ul li a, [class^=foundation] .calenderPage .main .relevant-pages ul li a, [class^=foundation] .job .main .relevant-pages ul li a, [class^=foundation] .reference .main .relevant-pages ul li a, [class^=foundation] .news-detail .main .relevant-pages ul li a, .page .main [class^=foundation] .relevant-pages ul li a, .faq .main [class^=foundation] .relevant-pages ul li a, .error-page .main [class^=foundation] .relevant-pages ul li a, .contact .main [class^=foundation] .relevant-pages ul li a, .actual .main [class^=foundation] .relevant-pages ul li a, .calenderPage .main [class^=foundation] .relevant-pages ul li a, .job .main [class^=foundation] .relevant-pages ul li a, .reference .main [class^=foundation] .relevant-pages ul li a, .news-detail .main [class^=foundation] .relevant-pages ul li a, [class^=foundation] .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=foundation] .relevant-pages ul li a, [class^=foundation] .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=foundation] .relevant-pages ul li a, [class^=foundation] .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=foundation] .relevant-pages ul li a, [class^=foundation] .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=foundation] .relevant-pages ul li a, [class^=jobs] .page-links ul li a, [class^=jobs] .page .main .relevant-pages ul li a, [class^=jobs] .faq .main .relevant-pages ul li a, [class^=jobs] .error-page .main .relevant-pages ul li a, [class^=jobs] .contact .main .relevant-pages ul li a, [class^=jobs] .actual .main .relevant-pages ul li a, [class^=jobs] .calenderPage .main .relevant-pages ul li a, [class^=jobs] .job .main .relevant-pages ul li a, [class^=jobs] .reference .main .relevant-pages ul li a, [class^=jobs] .news-detail .main .relevant-pages ul li a, .page .main [class^=jobs] .relevant-pages ul li a, .faq .main [class^=jobs] .relevant-pages ul li a, .error-page .main [class^=jobs] .relevant-pages ul li a, .contact .main [class^=jobs] .relevant-pages ul li a, .actual .main [class^=jobs] .relevant-pages ul li a, .calenderPage .main [class^=jobs] .relevant-pages ul li a, .job .main [class^=jobs] .relevant-pages ul li a, .reference .main [class^=jobs] .relevant-pages ul li a, .news-detail .main [class^=jobs] .relevant-pages ul li a, [class^=jobs] .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=jobs] .relevant-pages ul li a, [class^=jobs] .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=jobs] .relevant-pages ul li a, [class^=jobs] .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=jobs] .relevant-pages ul li a, [class^=jobs] .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=jobs] .relevant-pages ul li a, [class^=academy] .page-links ul li a, [class^=academy] .page .main .relevant-pages ul li a, [class^=academy] .faq .main .relevant-pages ul li a, [class^=academy] .error-page .main .relevant-pages ul li a, [class^=academy] .contact .main .relevant-pages ul li a, [class^=academy] .actual .main .relevant-pages ul li a, [class^=academy] .calenderPage .main .relevant-pages ul li a, [class^=academy] .job .main .relevant-pages ul li a, [class^=academy] .reference .main .relevant-pages ul li a, [class^=academy] .news-detail .main .relevant-pages ul li a, .page .main [class^=academy] .relevant-pages ul li a, .faq .main [class^=academy] .relevant-pages ul li a, .error-page .main [class^=academy] .relevant-pages ul li a, .contact .main [class^=academy] .relevant-pages ul li a, .actual .main [class^=academy] .relevant-pages ul li a, .calenderPage .main [class^=academy] .relevant-pages ul li a, .job .main [class^=academy] .relevant-pages ul li a, .reference .main [class^=academy] .relevant-pages ul li a, .news-detail .main [class^=academy] .relevant-pages ul li a, [class^=academy] .photo-albums .relevant-pages-container .relevant-pages ul li a, .photo-albums .relevant-pages-container [class^=academy] .relevant-pages ul li a, [class^=academy] .photo-album .relevant-pages-container .relevant-pages ul li a, .photo-album .relevant-pages-container [class^=academy] .relevant-pages ul li a, [class^=academy] .references .relevant-pages-container .relevant-pages ul li a, .references .relevant-pages-container [class^=academy] .relevant-pages ul li a, [class^=academy] .news .relevant-pages-container .relevant-pages ul li a, .news .relevant-pages-container [class^=academy] .relevant-pages ul li a, [class^=services] .relevant-pages ul li a, [class^=foundation] .relevant-pages ul li a, [class^=jobs] .relevant-pages ul li a, [class^=academy] .relevant-pages ul li a {
color: #78a0b4;
}
[class^=services] .page-links ul li a:hover, [class^=foundation] .page-links ul li a:hover, [class^=jobs] .page-links ul li a:hover, [class^=academy] .page-links ul li a:hover, [class^=services] .relevant-pages ul li a:hover, [class^=foundation] .relevant-pages ul li a:hover, [class^=jobs] .relevant-pages ul li a:hover, [class^=academy] .relevant-pages ul li a:hover {
color: #507a90;
}
[class^=services] .page-links ul li a.active, [class^=foundation] .page-links ul li a.active, [class^=jobs] .page-links ul li a.active, [class^=academy] .page-links ul li a.active, [class^=services] .relevant-pages ul li a.active, [class^=foundation] .relevant-pages ul li a.active, [class^=jobs] .relevant-pages ul li a.active, [class^=academy] .relevant-pages ul li a.active {
color: #4e7f99;
}
@media screen and (max-width: 450px) {
.page-links ul, .page .main .relevant-pages ul, .faq .main .relevant-pages ul, .error-page .main .relevant-pages ul, .contact .main .relevant-pages ul, .actual .main .relevant-pages ul, .calenderPage .main .relevant-pages ul, .job .main .relevant-pages ul, .reference .main .relevant-pages ul, .news-detail .main .relevant-pages ul, .photo-albums .relevant-pages-container .relevant-pages ul, .photo-album .relevant-pages-container .relevant-pages ul, .references .relevant-pages-container .relevant-pages ul, .news .relevant-pages-container .relevant-pages ul, .relevant-pages ul {
width: 100% !important;
}
}
.photo-albums-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin-top: 60px;
}
.photo-albums-row article {
width: calc((100% - 15px) / 2);
margin-bottom: 15px;
}
.photo-albums-row article a {
position: relative;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
.photo-albums-row article a figure {
width: 100%;
height: 200px;
background-color: #f1f1f1;
background-size: cover;
background-position: center;
}
.photo-albums-row article a .content {
position: relative;
z-index: 5;
width: 100%;
padding: 8px 40px 8px 30px;
background-color: #9bbf75;
transition: background-color 0.3s;
}
.photo-albums-row article a .content .status {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
background-color: #80ae4f;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.photo-albums-row article a .content h3 {
color: white;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
}
@media screen and (max-width: 1000px) {
.photo-albums-row article a .content h3 {
font-size: 0.8rem;
}
}
.photo-albums-row article a:hover .content {
background-color: #82af52;
}
.photo-albums-row article.password a .content {
background-color: #4fc2f8;
}
.photo-albums-row article.password a .content .status {
background-color: #1b71dd;
}
.photo-albums-row article.password a .content .status:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -140px -365px no-repeat;
background-size: 502px 423px;
width: 22px;
height: 24px;
}
.photo-albums-row article.password a:hover .content {
background-color: #1eb1f6;
}
[class^=vso] .photo-albums-row article a .content {
background-color: #25c6da;
}
[class^=vso] .photo-albums-row article a:hover .content {
background-color: #21b2c4;
}
[class^=vso] .photo-albums-row article.password a .content {
background-color: #0098a6;
}
[class^=vso] .photo-albums-row article.password a .content .status {
background-color: #01acc0;
}
[class^=vso] .photo-albums-row article.password a:hover .content {
background-color: #00c7d9;
}
/*==========================================================================
* Relevant pages | Photo Albums
* ========================================================================== */
.photo-albums .relevant-pages-container, .photo-album .relevant-pages-container {
background-color: white;
}
.photo-albums .relevant-pages-container .placeholder, .photo-album .relevant-pages-container .placeholder {
padding: 0 7.1428571429%;
}
.photo-albums .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .relevant-pages {
padding: 60px 0 50px;
}
.photo-albums[class^=vso] .relevant-pages-container .relevant-pages p, .photo-album[class^=vso] .relevant-pages-container .relevant-pages p {
color: #0098a6;
}
.photo-albums[class^=vso] .relevant-pages-container .relevant-pages ul li a, .photo-album[class^=vso] .relevant-pages-container .relevant-pages ul li a {
color: #25c6da;
}
.photo-albums[class^=vso] .relevant-pages-container .relevant-pages ul li a:hover, .photo-album[class^=vso] .relevant-pages-container .relevant-pages ul li a:hover {
color: #6be9f2;
}
.photo-albums[class^=vso] .relevant-pages-container .relevant-pages ul li a.active, .photo-album[class^=vso] .relevant-pages-container .relevant-pages ul li a.active {
color: #0098a6;
}
.password-form {
background-color: #f1f1f1;
max-width: 500px;
margin: 60px auto;
}
.password-form p {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
position: relative;
height: 40px;
line-height: 1.2;
font-weight: 700;
color: white;
background-color: #4fc2f8;
padding: 0 50px 0 40px;
margin: 0;
}
.password-form p .icon {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
background-color: #1b71dd;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.password-form p .icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -140px -365px no-repeat;
background-size: 502px 423px;
width: 22px;
height: 24px;
}
.password-form .main-form {
padding: 25px 40px;
}
.password-form .main-form label {
display: block;
width: 100%;
color: #333;
font-size: 0.7rem;
line-height: 1.2;
font-weight: 700;
}
.password-form .main-form input {
margin-top: 10px;
height: 45px;
width: 100%;
margin-left: 0;
background-color: white;
color: #0f46a1;
padding: 0 20px;
font-size: 1rem;
border: 1.5px transparent solid;
}
.password-form .main-form input.alert::-webkit-input-placeholder {
color: #ff1e00;
}
.password-form .main-form input.alert::-moz-placeholder {
color: #ff1e00;
}
.password-form .main-form input.alert:-moz-placeholder {
color: #ff1e00;
}
.password-form .main-form input.alert:-ms-input-placeholder {
color: #ff1e00;
}
.password-form .main-form input:focus {
box-shadow: none;
border: 1.5px transparent solid;
border-radius: 0;
outline: none;
}
.password-form .main-form input[type=submit] {
display: none;
}
.password-form .main-form .submit-button {
background-color: #ffb200;
width: 220px;
height: 50px;
margin: 25px 0 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
border-radius: 25px;
cursor: pointer;
color: white;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: background 0.3s;
}
.password-form .main-form .submit-button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
display: inline-block;
margin-left: 15px;
margin-right: -10px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.password-form .main-form .submit-button:hover {
background-color: #ffa200;
}
.password-form .main-form .submit-button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.service-cta {
background-image: url("/img/forest_top_view_grey.jpg");
background-position: right bottom;
background-size: cover;
}
.service-cta .grid-row {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
display: block;
padding: 80px 0;
text-align: center;
}
.service-cta .grid-row .grid-col {
vertical-align: middle;
}
.service-cta .image {
width: 50%;
}
.service-cta .image .placeholder {
width: 100%;
max-width: 210px;
margin-left: auto;
margin-right: 40px;
}
.service-cta .image figure {
position: relative;
width: 100%;
padding-bottom: 100%;
height: 0;
}
.service-cta .image figure span {
position: absolute;
border-radius: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.service-cta .content {
width: 50%;
font-size: 1.2rem;
text-align: left;
}
.service-cta .content p {
color: rgba(255, 255, 255, 0.8);
}
.service-cta .content p a {
color: white;
}
.service-cta.dynamic-block .content p a {
color: white;
border-color: white;
}
@media screen and (max-width: 840px) {
.service-cta .grid-row {
padding: 50px 0;
}
.service-cta .image {
width: 160px;
margin-right: 40px;
}
.service-cta .image .placeholder {
margin-right: 0;
}
.service-cta .content {
width: calc(100% - 200px);
}
}
@media screen and (max-width: 500px) {
.service-cta .grid-row {
display: block;
padding: 40px 0;
}
.service-cta .image {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.service-cta .content {
width: 100%;
text-align: center;
}
}
.services-ozapp .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
}
@media screen and (max-width: 840px) {
.services-ozapp .image-wrapper {
background-image: none;
}
}
.services-ozapp .brochures-overview {
padding: 100px 0;
background-color: white;
}
@media screen and (max-width: 840px) {
.services-ozapp .brochures-overview {
padding-bottom: 0;
}
}
.services-ozapp .brochures-overview:after {
background-color: #a1cee6;
width: 25%;
bottom: auto;
top: 0;
height: 100%;
}
.services-ozapp .brochures-overview .grid-row .styling {
left: -30px;
bottom: -50%;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder {
padding: 0;
background-color: transparent;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .overview-header {
margin-bottom: 20px;
}
@media screen and (max-width: 840px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .overview-header {
background-image: none;
}
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .overview-header h4 {
color: #4fc2f8;
}
@media screen and (max-width: 840px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .overview-header h4 {
width: 100%;
}
}
@media screen and (max-width: 750px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder > p {
width: 85.7142857143%;
margin: auto;
}
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
padding-top: 0;
}
@media screen and (max-width: 840px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles {
width: 85.7142857143%;
}
}
@media screen and (max-width: 500px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles {
width: 100%;
}
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article {
width: 230px;
margin-right: 40px;
position: relative;
margin-bottom: 60px;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content {
height: 100%;
width: 100%;
font-size: 1rem;
line-height: 1.4;
color: #737373;
background-color: #F2F2F2;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content h2 {
position: relative;
font-weight: bold;
font-size: 22px;
line-height: 28px;
color: #FFFFFF;
background-color: #ffb200;
width: 100%;
height: 200px;
padding: 15px 20px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content h2:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 24px 24px 0;
border-style: solid;
border-color: #F2F2F2 #F2F2F2 #ffb200 #ffb200;
background: #ffb200;
-webkit-box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content p, .services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a {
font-size: 16px;
line-height: 24px;
color: #737373;
margin: 0;
padding: 5px 30px;
max-width: none;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a {
position: relative;
background-color: transparent;
transition: none;
font-weight: bold;
font-size: 16px;
color: #425963;
padding-left: 30px;
margin-left: 30px;
margin-bottom: 15px;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a:before {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 20px;
height: 25px;
background: transparent url("/img/download_icon.svg") no-repeat;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a span {
font-weight: normal;
color: #78a0b4;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a:hover {
color: #567582;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article .content a:hover span {
color: #4fc2f8;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article.intern .content h2 {
background-color: #78a0b4;
}
@media screen and (max-width: 950px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 0.9rem;
}
}
@media screen and (max-width: 650px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article {
margin-right: 20px;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 1.2rem;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article a figure {
padding-top: 50%;
}
}
@media screen and (max-width: 400px) {
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 1rem;
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .articles article a figure {
padding-top: 60%;
}
}
.services-ozapp .brochures-overview .grid-row .overview-placeholder .pagination.bottom {
text-align: center;
margin-top: 25px;
}
.services-ozapp .brochures-overview .grid-row .overview-image {
z-index: 20;
width: 50%;
margin-right: -8.3333333333%;
vertical-align: top;
}
.services-ozapp .brochures-overview .grid-row .overview-image .image img {
width: 100%;
}
@media screen and (max-width: 840px) {
.services-ozapp .brochures-overview .grid-row .overview-image {
width: 100%;
margin-right: 0;
margin-left: 0;
line-height: 0;
}
}
.services-ozapp .dynamic-block .image span {
background-position: 0 48.5%;
}
.services-ozapp .dynamic-block .button:after {
margin-left: 60px;
}
.services-ozapp .simple-list {
padding-left: 20px;
list-style: none;
font-size: 1rem;
line-height: 1.6;
}
.services-ozapp .simple-list__item {
position: relative;
padding-left: 20px;
}
.services-ozapp .simple-list__item:before {
content: "•";
position: absolute;
color: #0f46a1;
font-size: 1.2rem;
line-height: 1;
left: -20px;
}
.services-ozapp .simple-list__link {
color: #1d88e6;
text-decoration: none;
transition: color 0.3s, border 0.3s, opacity 0.3s;
}
.services-ozapp .simple-list__link:hover {
color: #1260a4;
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content {
display: block;
width: 92.8571428571%;
margin-left: 7.1428571429%;
color: white;
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content h2 {
color: white;
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content p {
color: rgba(255, 255, 255, 0.8);
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content ol li {
width: 45%;
display: inline-block;
vertical-align: top;
margin-right: 4%;
}
@media screen and (max-width: 640px) {
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content ol li {
width: 100%;
margin-right: 0;
}
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content ol li:before {
font-size: 2em;
font-weight: bold;
color: white;
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content ol li:last-child {
margin-right: 0;
}
.services-ozapp .content-block[data-size-type="66"].ozapp-track .content ol li h4 {
color: white;
font-size: 1.5em;
margin-bottom: 20px;
}
.announcement {
font-size: 0.9rem;
line-height: 1.2;
border-radius: 10px;
}
.announcement__link {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding: 14px 20px 13px;
color: white;
background-color: #0f46a1;
text-decoration: none;
border-radius: 15px;
font-weight: bold;
transition: background-color 0.2s;
}
.announcement__link:hover {
background-color: #002382;
}
.announcement__icon {
display: inline-block;
font-size: 0;
line-height: 0;
margin-top: -2px;
}
.announcement__icon svg {
width: 12px;
height: 24px;
}
.announcement__text {
margin-left: 14px;
}
/*==========================================================================
* Home page
* ========================================================================== */
.home {
/* Mobile view
* ========================================================================== */
}
.home .image-wrapper .icon {
position: absolute;
right: 7.1428571429%;
bottom: -38px;
z-index: 4;
width: 60px;
height: 76px;
}
.home .image-wrapper .icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -256px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 76px;
display: block;
}
@media screen and (max-width: 1200px) {
.home .image-wrapper .icon {
right: 3.5714285714%;
}
}
.home .post-row .first-icon {
position: absolute;
left: 7.1428571429%;
bottom: 145px;
z-index: 4;
width: 60px;
height: 212px;
}
.home .post-row .first-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
.home[class^=vso] .post-row .first-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
@media screen and (max-width: 840px) {
.home .home-intro {
width: 100%;
padding-top: 0;
padding-bottom: 0;
}
.home .home-intro > figure {
position: relative;
width: 100%;
height: 0;
padding-bottom: 65%;
}
.home .home-intro .calender {
display: none;
}
.home .home-intro .home-blocks {
display: none;
}
.home .home-content {
margin-top: 0;
}
.home .home-content .background {
display: none;
}
.home .home-content .grid-row {
padding-top: 0;
display: block;
}
.home .home-content section {
padding: 50px 0;
width: 100%;
margin: 0;
}
.home .home-content section p {
font-size: 0.9rem;
}
.home .home-content aside {
display: none;
}
.home .home-content .contact-options .option.call {
width: 60%;
}
.home .home-content .contact-options .option.school-guide {
width: 40%;
}
.home .home-content .contact-options .option p {
font-size: 0.8rem;
margin: 0;
}
.home .post-row {
display: none;
}
}
/*==========================================================================
* Landingspage
* ========================================================================== */
.home.global .image-wrapper {
padding-bottom: 35%;
height: 0;
background-size: cover;
background-position: 50% 75%;
background-image: url("/img/zuiderbos-header.jpg");
}
@media screen and (max-width: 1930px) {
.home.global .image-wrapper {
background-image: url("/img/zuiderbos-header-1920.jpg");
}
}
@media screen and (max-width: 1370px) {
.home.global .image-wrapper {
background-image: url("/img/zuiderbos-header-1366.jpg");
}
}
@media screen and (max-width: 800px) {
.home.global .image-wrapper {
background-image: url("/img/zuiderbos-header-800.jpg");
}
}
@media screen and (max-width: 400px) {
.home.global .image-wrapper {
background-image: url("/img/zuiderbos-header-400.jpg");
}
}
.home.global .image-wrapper .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.home.global .image-wrapper .grid-col__link {
padding: 0 30px;
height: 50px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
color: white;
text-decoration: none;
transition: background-color 0.3s;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
}
.home.global .image-wrapper .grid-col__link:hover {
background-color: #78a0b4;
}
.home.global .image-wrapper .grid-col__link--office {
margin-right: 8.3333333333%;
background-color: #2a3040;
margin-right: 4.1666666667%;
}
.home.global .image-wrapper .grid-col__link--office:before {
content: "";
position: relative;
top: 0;
display: inline-block;
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -113px -154px no-repeat;
background-size: 502px 423px;
width: 18px;
height: 18px;
}
.home.global .image-wrapper .grid-col__link--vacancy {
right: -15px;
background-color: #0f46a1;
padding: 0 65px 0 45px;
font-size: 0.8rem;
font-weight: 700;
}
.home.global .image-wrapper .grid-col__link--vacancy .vacancy-amount__circle {
height: 26px;
width: 26px;
padding-top: 2px;
border-radius: 50%;
background-color: #eb407a;
position: relative;
left: 20px;
text-align: center;
font-size: 0.75rem;
line-height: 1.7;
}
.home.global .image-wrapper .grid-col__link--vacancy:hover {
background-color: #002382;
}
@media screen and (max-width: 840px) {
.home.global .image-wrapper {
padding-bottom: 50%;
}
.home.global .image-wrapper .grid-row {
width: 100%;
}
.home.global .image-wrapper .grid-col {
width: 100%;
}
.home.global .image-wrapper .grid-col__link--office {
display: none;
}
.home.global .image-wrapper .grid-col__link--vacancy {
font-size: 0.9rem;
right: 0;
border-radius: 0;
}
.home.global .image-wrapper .office-link {
margin-right: 0;
height: 60px;
width: 100%;
font-size: 0.8rem;
background-color: #323a4d;
}
.home.global .image-wrapper .office-link:before {
display: none;
}
.home.global .image-wrapper .office-link:hover {
background-color: #2a3040;
}
}
@media screen and (max-width: 640px) {
.home.global .image-wrapper {
padding-bottom: 0;
height: 320px;
}
}
.home.global .image-wrapper .announcement {
position: absolute;
left: 50%;
bottom: 180px;
transform: translateX(-50%);
}
@media screen and (max-width: 840px) {
.home.global .image-wrapper .announcement {
top: 70px;
bottom: auto;
width: 90%;
max-width: 425px;
}
}
.home.global .left-icon {
position: absolute;
left: -20%;
top: 300px;
z-index: 4;
width: 60px;
height: 212px;
}
.home.global .left-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
@media screen and (max-width: 900px) {
.home.global .left-icon {
display: none;
}
}
/*==========================================================================
* Overview page
* ========================================================================== */
.overview {
/* Mobile view
* ========================================================================== */
}
.overview .post-row .first-icon {
position: absolute;
left: 7.1428571429%;
top: -15px;
z-index: 4;
width: 60px;
height: 212px;
}
.overview .post-row .first-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
.overview .post-row .second-icon {
position: absolute;
right: 7.1428571429%;
bottom: 185px;
z-index: 4;
width: 60px;
height: 76px;
}
.overview .post-row .second-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -256px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 76px;
display: block;
}
.overview[class^=vso] .post-row .first-icon {
top: -80px;
}
.overview[class^=vso] .post-row .first-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
@media screen and (max-width: 840px) {
.overview .overview-header {
background-position: bottom right;
background-size: cover;
}
.overview .overview-header .grid-row {
width: 100%;
}
.overview .overview-header .image-slider {
width: 100%;
margin-left: 0;
}
.overview .overview-header .new-at-zuiderbos {
display: none;
}
.overview .overview-header .content {
display: block;
width: 85.7142857143%;
margin: 0 auto;
padding: 50px 0;
}
.overview .overview-header .content .padding-block {
display: none;
}
.overview .overview-header .content h1 {
font-size: 1.6rem;
margin-bottom: 50px;
}
.overview .overview-header .content .page-links, .overview .overview-header .content .page .main .relevant-pages, .overview .overview-header .content .faq .main .relevant-pages, .overview .overview-header .content .error-page .main .relevant-pages, .overview .overview-header .content .contact .main .relevant-pages, .overview .overview-header .content .actual .main .relevant-pages, .overview .overview-header .content .calenderPage .main .relevant-pages, .overview .overview-header .content .job .main .relevant-pages, .overview .overview-header .content .reference .main .relevant-pages, .overview .overview-header .content .news-detail .main .relevant-pages, .page .main .overview .overview-header .content .relevant-pages, .faq .main .overview .overview-header .content .relevant-pages, .error-page .main .overview .overview-header .content .relevant-pages, .contact .main .overview .overview-header .content .relevant-pages, .actual .main .overview .overview-header .content .relevant-pages, .calenderPage .main .overview .overview-header .content .relevant-pages, .job .main .overview .overview-header .content .relevant-pages, .reference .main .overview .overview-header .content .relevant-pages, .news-detail .main .overview .overview-header .content .relevant-pages, .overview .overview-header .content .references .relevant-pages-container .relevant-pages, .references .relevant-pages-container .overview .overview-header .content .relevant-pages, .overview .overview-header .content .news .relevant-pages-container .relevant-pages, .news .relevant-pages-container .overview .overview-header .content .relevant-pages, .overview .overview-header .content .photo-albums .relevant-pages-container .relevant-pages, .photo-albums .relevant-pages-container .overview .overview-header .content .relevant-pages, .overview .overview-header .content .photo-album .relevant-pages-container .relevant-pages, .photo-album .relevant-pages-container .overview .overview-header .content .relevant-pages {
margin: 50px 0 0;
padding: 0;
}
.overview .overview-after-links {
display: none;
}
.overview .post-row .styling {
display: none;
}
.overview[class^=vso] .overview-header {
background-image: url("/img/forest_top_view_green.jpg");
}
.overview[class^=services] .overview-header, .overview[class^=foundation] .overview-header, .overview[class^=academy] .overview-header {
background-image: url("/img/forest_top_view_grey.jpg");
}
}
/*==========================================================================
* Main page
* ========================================================================== */
.page, .faq, .error-page, .contact, .actual, .calenderPage, .job, .reference, .news-detail {
/* Wrapper for image and quote
* ===============================*/
/* Main content
* ===============================*/
/* Mobile view
* ========================================================================== */
}
.page .grid-row, .faq .grid-row, .error-page .grid-row, .contact .grid-row, .actual .grid-row, .calenderPage .grid-row, .job .grid-row, .reference .grid-row, .news-detail .grid-row {
position: relative;
overflow: visible;
}
.page .content-placeholder, .faq .content-placeholder, .error-page .content-placeholder, .contact .content-placeholder, .actual .content-placeholder, .calenderPage .content-placeholder, .job .content-placeholder, .reference .content-placeholder, .news-detail .content-placeholder {
position: relative;
}
.page .content-placeholder:after, .faq .content-placeholder:after, .error-page .content-placeholder:after, .contact .content-placeholder:after, .actual .content-placeholder:after, .calenderPage .content-placeholder:after, .job .content-placeholder:after, .reference .content-placeholder:after, .news-detail .content-placeholder:after {
content: "";
position: relative;
z-index: 1;
display: block;
height: 60px;
width: 100%;
background-image: url("/img/forest_bottom.jpg");
background-position: center;
background-size: cover;
}
.page .content-placeholder .background, .faq .content-placeholder .background, .error-page .content-placeholder .background, .contact .content-placeholder .background, .actual .content-placeholder .background, .calenderPage .content-placeholder .background, .job .content-placeholder .background, .reference .content-placeholder .background, .news-detail .content-placeholder .background {
position: absolute;
height: calc(100% - 120px);
width: 50%;
right: 0;
top: 120px;
background-color: white;
}
.page .content-placeholder .right-icon, .faq .content-placeholder .right-icon, .error-page .content-placeholder .right-icon, .contact .content-placeholder .right-icon, .actual .content-placeholder .right-icon, .calenderPage .content-placeholder .right-icon, .job .content-placeholder .right-icon, .reference .content-placeholder .right-icon, .news-detail .content-placeholder .right-icon {
position: absolute;
right: -30px;
top: 180px;
z-index: 4;
width: 60px;
height: 144px;
}
.page .content-placeholder .right-icon.extra-margin-top, .faq .content-placeholder .right-icon.extra-margin-top, .error-page .content-placeholder .right-icon.extra-margin-top, .contact .content-placeholder .right-icon.extra-margin-top, .actual .content-placeholder .right-icon.extra-margin-top, .calenderPage .content-placeholder .right-icon.extra-margin-top, .job .content-placeholder .right-icon.extra-margin-top, .reference .content-placeholder .right-icon.extra-margin-top, .news-detail .content-placeholder .right-icon.extra-margin-top {
top: calc(180px + 20vh);
}
.page .content-placeholder .right-icon:after, .faq .content-placeholder .right-icon:after, .error-page .content-placeholder .right-icon:after, .contact .content-placeholder .right-icon:after, .actual .content-placeholder .right-icon:after, .calenderPage .content-placeholder .right-icon:after, .job .content-placeholder .right-icon:after, .reference .content-placeholder .right-icon:after, .news-detail .content-placeholder .right-icon:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -256px -78px no-repeat;
background-size: 502px 423px;
width: 60px;
height: 144px;
display: block;
}
.page .content-placeholder .left-icon, .faq .content-placeholder .left-icon, .error-page .content-placeholder .left-icon, .contact .content-placeholder .left-icon, .actual .content-placeholder .left-icon, .calenderPage .content-placeholder .left-icon, .job .content-placeholder .left-icon, .reference .content-placeholder .left-icon, .news-detail .content-placeholder .left-icon {
position: absolute;
left: -11.1111111111%;
bottom: 0;
z-index: 4;
display: block;
height: 212px;
width: 60px;
}
.page .content-placeholder .left-icon:after, .faq .content-placeholder .left-icon:after, .error-page .content-placeholder .left-icon:after, .contact .content-placeholder .left-icon:after, .actual .content-placeholder .left-icon:after, .calenderPage .content-placeholder .left-icon:after, .job .content-placeholder .left-icon:after, .reference .content-placeholder .left-icon:after, .news-detail .content-placeholder .left-icon:after {
content: "";
position: relative;
left: -30px;
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
.page .content-placeholder .grey-block, .faq .content-placeholder .grey-block, .error-page .content-placeholder .grey-block, .contact .content-placeholder .grey-block, .actual .content-placeholder .grey-block, .calenderPage .content-placeholder .grey-block, .job .content-placeholder .grey-block, .reference .content-placeholder .grey-block, .news-detail .content-placeholder .grey-block {
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
width: 50%;
background-color: #e8eaf6;
}
.page .page-impression, .faq .page-impression, .error-page .page-impression, .contact .page-impression, .actual .page-impression, .calenderPage .page-impression, .job .page-impression, .reference .page-impression, .news-detail .page-impression {
position: relative;
z-index: 3;
right: -4.1666666667%;
width: 37.5%;
vertical-align: top;
padding-top: 60px;
padding-bottom: 40px;
overflow: visible;
}
.page .page-impression .quote, .faq .page-impression .quote, .error-page .page-impression .quote, .contact .page-impression .quote, .actual .page-impression .quote, .calenderPage .page-impression .quote, .job .page-impression .quote, .reference .page-impression .quote, .news-detail .page-impression .quote {
height: 240px;
background-color: #f06292;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
margin-bottom: 30px;
}
.page .page-impression .quote p, .faq .page-impression .quote p, .error-page .page-impression .quote p, .contact .page-impression .quote p, .actual .page-impression .quote p, .calenderPage .page-impression .quote p, .job .page-impression .quote p, .reference .page-impression .quote p, .news-detail .page-impression .quote p {
margin: 0;
padding: 0 10%;
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: 1.4rem;
font-style: italic;
text-align: center;
}
.page .page-impression img, .faq .page-impression img, .error-page .page-impression img, .contact .page-impression img, .actual .page-impression img, .calenderPage .page-impression img, .job .page-impression img, .reference .page-impression img, .news-detail .page-impression img {
width: 100%;
}
.page .page-impression img.large, .faq .page-impression img.large, .error-page .page-impression img.large, .contact .page-impression img.large, .actual .page-impression img.large, .calenderPage .page-impression img.large, .job .page-impression img.large, .reference .page-impression img.large, .news-detail .page-impression img.large {
display: none;
}
.page .page-impression .button, .faq .page-impression .button, .error-page .page-impression .button, .contact .page-impression .button, .actual .page-impression .button, .calenderPage .page-impression .button, .job .page-impression .button, .reference .page-impression .button, .news-detail .page-impression .button {
position: absolute;
left: 0;
bottom: -45px;
display: inline-block;
padding: 15px 30px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.page .page-impression .button:after, .faq .page-impression .button:after, .error-page .page-impression .button:after, .contact .page-impression .button:after, .actual .page-impression .button:after, .calenderPage .page-impression .button:after, .job .page-impression .button:after, .reference .page-impression .button:after, .news-detail .page-impression .button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.page .page-impression .button:hover, .faq .page-impression .button:hover, .error-page .page-impression .button:hover, .contact .page-impression .button:hover, .actual .page-impression .button:hover, .calenderPage .page-impression .button:hover, .job .page-impression .button:hover, .reference .page-impression .button:hover, .news-detail .page-impression .button:hover {
background-color: #ffa200;
}
.page .page-impression .button:hover:after, .faq .page-impression .button:hover:after, .error-page .page-impression .button:hover:after, .contact .page-impression .button:hover:after, .actual .page-impression .button:hover:after, .calenderPage .page-impression .button:hover:after, .job .page-impression .button:hover:after, .reference .page-impression .button:hover:after, .news-detail .page-impression .button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.page .main, .faq .main, .error-page .main, .contact .main, .actual .main, .calenderPage .main, .job .main, .reference .main, .news-detail .main {
width: 62.5%;
padding: 0 8.3333333333% 0 12.5%;
background-color: white;
z-index: 2;
}
.page .main .main-placeholder, .faq .main .main-placeholder, .error-page .main .main-placeholder, .contact .main .main-placeholder, .actual .main .main-placeholder, .calenderPage .main .main-placeholder, .job .main .main-placeholder, .reference .main .main-placeholder, .news-detail .main .main-placeholder {
width: 100%;
padding: 0 13.3333333333% 0 20%;
}
.page .main .content, .faq .main .content, .error-page .main .content, .contact .main .content, .actual .main .content, .calenderPage .main .content, .job .main .content, .reference .main .content, .news-detail .main .content {
color: #737373;
font-size: 0.9rem;
}
.page .main .content h1, .faq .main .content h1, .error-page .main .content h1, .contact .main .content h1, .actual .main .content h1, .calenderPage .main .content h1, .job .main .content h1, .reference .main .content h1, .news-detail .main .content h1, .page .main .content h2, .faq .main .content h2, .error-page .main .content h2, .contact .main .content h2, .actual .main .content h2, .calenderPage .main .content h2, .job .main .content h2, .reference .main .content h2, .news-detail .main .content h2 {
font-size: 2rem;
line-height: 1.2;
max-width: 580px;
color: #0f46a1;
margin: 0 0 40px;
}
.page .main .content p, .faq .main .content p, .error-page .main .content p, .contact .main .content p, .actual .main .content p, .calenderPage .main .content p, .job .main .content p, .reference .main .content p, .news-detail .main .content p {
margin: 1rem 0;
}
.page .main .content ul, .faq .main .content ul, .error-page .main .content ul, .contact .main .content ul, .actual .main .content ul, .calenderPage .main .content ul, .job .main .content ul, .reference .main .content ul, .news-detail .main .content ul, .page .main .content ol, .faq .main .content ol, .error-page .main .content ol, .contact .main .content ol, .actual .main .content ol, .calenderPage .main .content ol, .job .main .content ol, .reference .main .content ol, .news-detail .main .content ol {
padding-left: 20px;
list-style: none;
}
.page .main .content ul li, .faq .main .content ul li, .error-page .main .content ul li, .contact .main .content ul li, .actual .main .content ul li, .calenderPage .main .content ul li, .job .main .content ul li, .reference .main .content ul li, .news-detail .main .content ul li, .page .main .content ol li, .faq .main .content ol li, .error-page .main .content ol li, .contact .main .content ol li, .actual .main .content ol li, .calenderPage .main .content ol li, .job .main .content ol li, .reference .main .content ol li, .news-detail .main .content ol li {
position: relative;
padding-left: 20px;
}
.page .main .content ul li:before, .faq .main .content ul li:before, .error-page .main .content ul li:before, .contact .main .content ul li:before, .actual .main .content ul li:before, .calenderPage .main .content ul li:before, .job .main .content ul li:before, .reference .main .content ul li:before, .news-detail .main .content ul li:before, .page .main .content ol li:before, .faq .main .content ol li:before, .error-page .main .content ol li:before, .contact .main .content ol li:before, .actual .main .content ol li:before, .calenderPage .main .content ol li:before, .job .main .content ol li:before, .reference .main .content ol li:before, .news-detail .main .content ol li:before {
content: "•";
position: absolute;
color: #0f46a1;
font-size: 1.2rem;
line-height: 1;
left: -20px;
}
.page .main .content ol, .faq .main .content ol, .error-page .main .content ol, .contact .main .content ol, .actual .main .content ol, .calenderPage .main .content ol, .job .main .content ol, .reference .main .content ol, .news-detail .main .content ol {
counter-reset: ol-counter;
}
.page .main .content ol li:before, .faq .main .content ol li:before, .error-page .main .content ol li:before, .contact .main .content ol li:before, .actual .main .content ol li:before, .calenderPage .main .content ol li:before, .job .main .content ol li:before, .reference .main .content ol li:before, .news-detail .main .content ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 2px;
}
.page .main .content strong, .faq .main .content strong, .error-page .main .content strong, .contact .main .content strong, .actual .main .content strong, .calenderPage .main .content strong, .job .main .content strong, .reference .main .content strong, .news-detail .main .content strong {
color: #333;
}
.page .main .content a:not(.button), .faq .main .content a:not(.button), .error-page .main .content a:not(.button), .contact .main .content a:not(.button), .actual .main .content a:not(.button), .calenderPage .main .content a:not(.button), .job .main .content a:not(.button), .reference .main .content a:not(.button), .news-detail .main .content a:not(.button) {
color: #1d88e6;
text-decoration: none;
transition: color 0.3s, border 0.3s, opacity 0.3s;
}
.page .main .content a:not(.button):hover, .faq .main .content a:not(.button):hover, .error-page .main .content a:not(.button):hover, .contact .main .content a:not(.button):hover, .actual .main .content a:not(.button):hover, .calenderPage .main .content a:not(.button):hover, .job .main .content a:not(.button):hover, .reference .main .content a:not(.button):hover, .news-detail .main .content a:not(.button):hover {
color: #1260a4;
}
.page .main .return-link, .faq .main .return-link, .error-page .main .return-link, .contact .main .return-link, .actual .main .return-link, .calenderPage .main .return-link, .job .main .return-link, .reference .main .return-link, .news-detail .main .return-link {
height: 100px;
margin-top: 20px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.page .main .return-link a, .faq .main .return-link a, .error-page .main .return-link a, .contact .main .return-link a, .actual .main .return-link a, .calenderPage .main .return-link a, .job .main .return-link a, .reference .main .return-link a, .news-detail .main .return-link a {
font-size: 0.8rem;
color: #4fc2f8;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.page .main .return-link a:before, .faq .main .return-link a:before, .error-page .main .return-link a:before, .contact .main .return-link a:before, .actual .main .return-link a:before, .calenderPage .main .return-link a:before, .job .main .return-link a:before, .reference .main .return-link a:before, .news-detail .main .return-link a:before {
content: "";
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -134px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
transition: transform 0.3s;
}
.page .main .return-link a:hover, .faq .main .return-link a:hover, .error-page .main .return-link a:hover, .contact .main .return-link a:hover, .actual .main .return-link a:hover, .calenderPage .main .return-link a:hover, .job .main .return-link a:hover, .reference .main .return-link a:hover, .news-detail .main .return-link a:hover {
color: #2196f3;
}
.page .main .return-link a:hover:before, .faq .main .return-link a:hover:before, .error-page .main .return-link a:hover:before, .contact .main .return-link a:hover:before, .actual .main .return-link a:hover:before, .calenderPage .main .return-link a:hover:before, .job .main .return-link a:hover:before, .reference .main .return-link a:hover:before, .news-detail .main .return-link a:hover:before {
-webkit-transform: translate3d(-5px, 0, 0) rotate(180deg);
-moz-transform: translate3d(-5px, 0, 0) rotate(180deg);
-ms-transform: translate3d(-5px, 0, 0) rotate(180deg);
-o-transform: translate3d(-5px, 0, 0) rotate(180deg);
-spec-transform: translate3d(-5px, 0, 0) rotate(180deg);
transform: translate3d(-5px, 0, 0) rotate(180deg);
}
.page .main a.button, .faq .main a.button, .error-page .main a.button, .contact .main a.button, .actual .main a.button, .calenderPage .main a.button, .job .main a.button, .reference .main a.button, .news-detail .main a.button {
display: inline-block;
margin-top: 100px;
padding: 15px 20px;
border-radius: 25px;
background-color: #ffb200;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s;
}
.page .main a.button:after, .faq .main a.button:after, .error-page .main a.button:after, .contact .main a.button:after, .actual .main a.button:after, .calenderPage .main a.button:after, .job .main a.button:after, .reference .main a.button:after, .news-detail .main a.button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.page .main a.button:hover, .faq .main a.button:hover, .error-page .main a.button:hover, .contact .main a.button:hover, .actual .main a.button:hover, .calenderPage .main a.button:hover, .job .main a.button:hover, .reference .main a.button:hover, .news-detail .main a.button:hover {
background-color: #ffa200;
}
.page .main a.button:hover:after, .faq .main a.button:hover:after, .error-page .main a.button:hover:after, .contact .main a.button:hover:after, .actual .main a.button:hover:after, .calenderPage .main a.button:hover:after, .job .main a.button:hover:after, .reference .main a.button:hover:after, .news-detail .main a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .page .main a.button, [class^=vso] .faq .main a.button, [class^=vso] .error-page .main a.button, [class^=vso] .contact .main a.button, [class^=vso] .actual .main a.button, [class^=vso] .calenderPage .main a.button, [class^=vso] .job .main a.button, [class^=vso] .reference .main a.button, [class^=vso] .news-detail .main a.button {
background-color: #25c6da;
}
[class^=vso] .page .main a.button:hover, [class^=vso] .faq .main a.button:hover, [class^=vso] .error-page .main a.button:hover, [class^=vso] .contact .main a.button:hover, [class^=vso] .actual .main a.button:hover, [class^=vso] .calenderPage .main a.button:hover, [class^=vso] .job .main a.button:hover, [class^=vso] .reference .main a.button:hover, [class^=vso] .news-detail .main a.button:hover {
background-color: #0098a6;
}
.page .main .relevant-pages, .faq .main .relevant-pages, .error-page .main .relevant-pages, .contact .main .relevant-pages, .actual .main .relevant-pages, .calenderPage .main .relevant-pages, .job .main .relevant-pages, .reference .main .relevant-pages, .news-detail .main .relevant-pages {
padding: 60px 0 50px;
}
.page[class^=vso] .content-placeholder .right-icon:after, [class^=vso].faq .content-placeholder .right-icon:after, [class^=vso].error-page .content-placeholder .right-icon:after, [class^=vso].contact .content-placeholder .right-icon:after, [class^=vso].actual .content-placeholder .right-icon:after, [class^=vso].calenderPage .content-placeholder .right-icon:after, [class^=vso].job .content-placeholder .right-icon:after, [class^=vso].reference .content-placeholder .right-icon:after, [class^=vso].news-detail .content-placeholder .right-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -379px -78px no-repeat;
background-size: 502px 423px;
width: 60px;
height: 144px;
}
.page[class^=vso] .content-placeholder .left-icon:after, [class^=vso].faq .content-placeholder .left-icon:after, [class^=vso].error-page .content-placeholder .left-icon:after, [class^=vso].contact .content-placeholder .left-icon:after, [class^=vso].actual .content-placeholder .left-icon:after, [class^=vso].calenderPage .content-placeholder .left-icon:after, [class^=vso].job .content-placeholder .left-icon:after, [class^=vso].reference .content-placeholder .left-icon:after, [class^=vso].news-detail .content-placeholder .left-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
.page[class^=vso] .page-impression .quote, [class^=vso].faq .page-impression .quote, [class^=vso].error-page .page-impression .quote, [class^=vso].contact .page-impression .quote, [class^=vso].actual .page-impression .quote, [class^=vso].calenderPage .page-impression .quote, [class^=vso].job .page-impression .quote, [class^=vso].reference .page-impression .quote, [class^=vso].news-detail .page-impression .quote {
background-color: #25c6da;
}
.page[class^=vso] .main .content h1, [class^=vso].faq .main .content h1, [class^=vso].error-page .main .content h1, [class^=vso].contact .main .content h1, [class^=vso].actual .main .content h1, [class^=vso].calenderPage .main .content h1, [class^=vso].job .main .content h1, [class^=vso].reference .main .content h1, [class^=vso].news-detail .main .content h1, .page[class^=vso] .main .content h2, [class^=vso].faq .main .content h2, [class^=vso].error-page .main .content h2, [class^=vso].contact .main .content h2, [class^=vso].actual .main .content h2, [class^=vso].calenderPage .main .content h2, [class^=vso].job .main .content h2, [class^=vso].reference .main .content h2, [class^=vso].news-detail .main .content h2 {
color: #0098a6;
}
.page[class^=vso] .main .content ul li:before, [class^=vso].faq .main .content ul li:before, [class^=vso].error-page .main .content ul li:before, [class^=vso].contact .main .content ul li:before, [class^=vso].actual .main .content ul li:before, [class^=vso].calenderPage .main .content ul li:before, [class^=vso].job .main .content ul li:before, [class^=vso].reference .main .content ul li:before, [class^=vso].news-detail .main .content ul li:before, .page[class^=vso] .main .content ol li:before, [class^=vso].faq .main .content ol li:before, [class^=vso].error-page .main .content ol li:before, [class^=vso].contact .main .content ol li:before, [class^=vso].actual .main .content ol li:before, [class^=vso].calenderPage .main .content ol li:before, [class^=vso].job .main .content ol li:before, [class^=vso].reference .main .content ol li:before, [class^=vso].news-detail .main .content ol li:before {
color: #0098a6;
}
.page[class^=vso] .main .content a:not(.button), [class^=vso].faq .main .content a:not(.button), [class^=vso].error-page .main .content a:not(.button), [class^=vso].contact .main .content a:not(.button), [class^=vso].actual .main .content a:not(.button), [class^=vso].calenderPage .main .content a:not(.button), [class^=vso].job .main .content a:not(.button), [class^=vso].reference .main .content a:not(.button), [class^=vso].news-detail .main .content a:not(.button) {
color: #25c6da;
}
.page[class^=vso] .main .content a:not(.button):hover, [class^=vso].faq .main .content a:not(.button):hover, [class^=vso].error-page .main .content a:not(.button):hover, [class^=vso].contact .main .content a:not(.button):hover, [class^=vso].actual .main .content a:not(.button):hover, [class^=vso].calenderPage .main .content a:not(.button):hover, [class^=vso].job .main .content a:not(.button):hover, [class^=vso].reference .main .content a:not(.button):hover, [class^=vso].news-detail .main .content a:not(.button):hover {
color: #1e9eae;
}
.page[class^=vso] .main a.button, [class^=vso].faq .main a.button, [class^=vso].error-page .main a.button, [class^=vso].contact .main a.button, [class^=vso].actual .main a.button, [class^=vso].calenderPage .main a.button, [class^=vso].job .main a.button, [class^=vso].reference .main a.button, [class^=vso].news-detail .main a.button {
background-color: #25c6da;
}
.page[class^=vso] .main a.button:hover, [class^=vso].faq .main a.button:hover, [class^=vso].error-page .main a.button:hover, [class^=vso].contact .main a.button:hover, [class^=vso].actual .main a.button:hover, [class^=vso].calenderPage .main a.button:hover, [class^=vso].job .main a.button:hover, [class^=vso].reference .main a.button:hover, [class^=vso].news-detail .main a.button:hover {
background-color: #0098a6;
}
.page[class^=vso] .main .relevant-pages p, [class^=vso].faq .main .relevant-pages p, [class^=vso].error-page .main .relevant-pages p, [class^=vso].contact .main .relevant-pages p, [class^=vso].actual .main .relevant-pages p, [class^=vso].calenderPage .main .relevant-pages p, [class^=vso].job .main .relevant-pages p, [class^=vso].reference .main .relevant-pages p, [class^=vso].news-detail .main .relevant-pages p {
color: #0098a6;
}
.page[class^=vso] .main .relevant-pages ul li a, [class^=vso].faq .main .relevant-pages ul li a, [class^=vso].error-page .main .relevant-pages ul li a, [class^=vso].contact .main .relevant-pages ul li a, [class^=vso].actual .main .relevant-pages ul li a, [class^=vso].calenderPage .main .relevant-pages ul li a, [class^=vso].job .main .relevant-pages ul li a, [class^=vso].reference .main .relevant-pages ul li a, [class^=vso].news-detail .main .relevant-pages ul li a {
color: #25c6da;
}
.page[class^=vso] .main .relevant-pages ul li a:hover, [class^=vso].faq .main .relevant-pages ul li a:hover, [class^=vso].error-page .main .relevant-pages ul li a:hover, [class^=vso].contact .main .relevant-pages ul li a:hover, [class^=vso].actual .main .relevant-pages ul li a:hover, [class^=vso].calenderPage .main .relevant-pages ul li a:hover, [class^=vso].job .main .relevant-pages ul li a:hover, [class^=vso].reference .main .relevant-pages ul li a:hover, [class^=vso].news-detail .main .relevant-pages ul li a:hover {
color: #6be9f2;
}
.page[class^=vso] .main .relevant-pages ul li a.active, [class^=vso].faq .main .relevant-pages ul li a.active, [class^=vso].error-page .main .relevant-pages ul li a.active, [class^=vso].contact .main .relevant-pages ul li a.active, [class^=vso].actual .main .relevant-pages ul li a.active, [class^=vso].calenderPage .main .relevant-pages ul li a.active, [class^=vso].job .main .relevant-pages ul li a.active, [class^=vso].reference .main .relevant-pages ul li a.active, [class^=vso].news-detail .main .relevant-pages ul li a.active {
color: #0098a6;
}
.page[class^=services] .content-placeholder .right-icon:after, [class^=services].faq .content-placeholder .right-icon:after, [class^=services].error-page .content-placeholder .right-icon:after, [class^=services].contact .content-placeholder .right-icon:after, [class^=services].actual .content-placeholder .right-icon:after, [class^=services].calenderPage .content-placeholder .right-icon:after, [class^=services].job .content-placeholder .right-icon:after, [class^=services].reference .content-placeholder .right-icon:after, [class^=services].news-detail .content-placeholder .right-icon:after, .page[class^=foundation] .content-placeholder .right-icon:after, [class^=foundation].faq .content-placeholder .right-icon:after, [class^=foundation].error-page .content-placeholder .right-icon:after, [class^=foundation].contact .content-placeholder .right-icon:after, [class^=foundation].actual .content-placeholder .right-icon:after, [class^=foundation].calenderPage .content-placeholder .right-icon:after, [class^=foundation].job .content-placeholder .right-icon:after, [class^=foundation].reference .content-placeholder .right-icon:after, [class^=foundation].news-detail .content-placeholder .right-icon:after, .page[class^=academy] .content-placeholder .right-icon:after, [class^=academy].faq .content-placeholder .right-icon:after, [class^=academy].error-page .content-placeholder .right-icon:after, [class^=academy].contact .content-placeholder .right-icon:after, [class^=academy].actual .content-placeholder .right-icon:after, [class^=academy].calenderPage .content-placeholder .right-icon:after, [class^=academy].job .content-placeholder .right-icon:after, [class^=academy].reference .content-placeholder .right-icon:after, [class^=academy].news-detail .content-placeholder .right-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -379px -78px no-repeat;
background-size: 502px 423px;
width: 60px;
height: 144px;
}
.page[class^=services] .content-placeholder .left-icon:after, [class^=services].faq .content-placeholder .left-icon:after, [class^=services].error-page .content-placeholder .left-icon:after, [class^=services].contact .content-placeholder .left-icon:after, [class^=services].actual .content-placeholder .left-icon:after, [class^=services].calenderPage .content-placeholder .left-icon:after, [class^=services].job .content-placeholder .left-icon:after, [class^=services].reference .content-placeholder .left-icon:after, [class^=services].news-detail .content-placeholder .left-icon:after, .page[class^=foundation] .content-placeholder .left-icon:after, [class^=foundation].faq .content-placeholder .left-icon:after, [class^=foundation].error-page .content-placeholder .left-icon:after, [class^=foundation].contact .content-placeholder .left-icon:after, [class^=foundation].actual .content-placeholder .left-icon:after, [class^=foundation].calenderPage .content-placeholder .left-icon:after, [class^=foundation].job .content-placeholder .left-icon:after, [class^=foundation].reference .content-placeholder .left-icon:after, [class^=foundation].news-detail .content-placeholder .left-icon:after, .page[class^=academy] .content-placeholder .left-icon:after, [class^=academy].faq .content-placeholder .left-icon:after, [class^=academy].error-page .content-placeholder .left-icon:after, [class^=academy].contact .content-placeholder .left-icon:after, [class^=academy].actual .content-placeholder .left-icon:after, [class^=academy].calenderPage .content-placeholder .left-icon:after, [class^=academy].job .content-placeholder .left-icon:after, [class^=academy].reference .content-placeholder .left-icon:after, [class^=academy].news-detail .content-placeholder .left-icon:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
.page[class^=services] .page-impression .quote, [class^=services].faq .page-impression .quote, [class^=services].error-page .page-impression .quote, [class^=services].contact .page-impression .quote, [class^=services].actual .page-impression .quote, [class^=services].calenderPage .page-impression .quote, [class^=services].job .page-impression .quote, [class^=services].reference .page-impression .quote, [class^=services].news-detail .page-impression .quote, .page[class^=foundation] .page-impression .quote, [class^=foundation].faq .page-impression .quote, [class^=foundation].error-page .page-impression .quote, [class^=foundation].contact .page-impression .quote, [class^=foundation].actual .page-impression .quote, [class^=foundation].calenderPage .page-impression .quote, [class^=foundation].job .page-impression .quote, [class^=foundation].reference .page-impression .quote, [class^=foundation].news-detail .page-impression .quote, .page[class^=academy] .page-impression .quote, [class^=academy].faq .page-impression .quote, [class^=academy].error-page .page-impression .quote, [class^=academy].contact .page-impression .quote, [class^=academy].actual .page-impression .quote, [class^=academy].calenderPage .page-impression .quote, [class^=academy].job .page-impression .quote, [class^=academy].reference .page-impression .quote, [class^=academy].news-detail .page-impression .quote {
background-color: #4fc2f8;
}
.page[class^=services] .main .content h1, [class^=services].faq .main .content h1, [class^=services].error-page .main .content h1, [class^=services].contact .main .content h1, [class^=services].actual .main .content h1, [class^=services].calenderPage .main .content h1, [class^=services].job .main .content h1, [class^=services].reference .main .content h1, [class^=services].news-detail .main .content h1, .page[class^=services] .main .content h2, [class^=services].faq .main .content h2, [class^=services].error-page .main .content h2, [class^=services].contact .main .content h2, [class^=services].actual .main .content h2, [class^=services].calenderPage .main .content h2, [class^=services].job .main .content h2, [class^=services].reference .main .content h2, [class^=services].news-detail .main .content h2, .page[class^=foundation] .main .content h1, [class^=foundation].faq .main .content h1, [class^=foundation].error-page .main .content h1, [class^=foundation].contact .main .content h1, [class^=foundation].actual .main .content h1, [class^=foundation].calenderPage .main .content h1, [class^=foundation].job .main .content h1, [class^=foundation].reference .main .content h1, [class^=foundation].news-detail .main .content h1, .page[class^=foundation] .main .content h2, [class^=foundation].faq .main .content h2, [class^=foundation].error-page .main .content h2, [class^=foundation].contact .main .content h2, [class^=foundation].actual .main .content h2, [class^=foundation].calenderPage .main .content h2, [class^=foundation].job .main .content h2, [class^=foundation].reference .main .content h2, [class^=foundation].news-detail .main .content h2, .page[class^=academy] .main .content h1, [class^=academy].faq .main .content h1, [class^=academy].error-page .main .content h1, [class^=academy].contact .main .content h1, [class^=academy].actual .main .content h1, [class^=academy].calenderPage .main .content h1, [class^=academy].job .main .content h1, [class^=academy].reference .main .content h1, [class^=academy].news-detail .main .content h1, .page[class^=academy] .main .content h2, [class^=academy].faq .main .content h2, [class^=academy].error-page .main .content h2, [class^=academy].contact .main .content h2, [class^=academy].actual .main .content h2, [class^=academy].calenderPage .main .content h2, [class^=academy].job .main .content h2, [class^=academy].reference .main .content h2, [class^=academy].news-detail .main .content h2 {
color: #4e7f99;
}
.page[class^=services] .main .content ul li:before, [class^=services].faq .main .content ul li:before, [class^=services].error-page .main .content ul li:before, [class^=services].contact .main .content ul li:before, [class^=services].actual .main .content ul li:before, [class^=services].calenderPage .main .content ul li:before, [class^=services].job .main .content ul li:before, [class^=services].reference .main .content ul li:before, [class^=services].news-detail .main .content ul li:before, .page[class^=services] .main .content ol li:before, [class^=services].faq .main .content ol li:before, [class^=services].error-page .main .content ol li:before, [class^=services].contact .main .content ol li:before, [class^=services].actual .main .content ol li:before, [class^=services].calenderPage .main .content ol li:before, [class^=services].job .main .content ol li:before, [class^=services].reference .main .content ol li:before, [class^=services].news-detail .main .content ol li:before, .page[class^=foundation] .main .content ul li:before, [class^=foundation].faq .main .content ul li:before, [class^=foundation].error-page .main .content ul li:before, [class^=foundation].contact .main .content ul li:before, [class^=foundation].actual .main .content ul li:before, [class^=foundation].calenderPage .main .content ul li:before, [class^=foundation].job .main .content ul li:before, [class^=foundation].reference .main .content ul li:before, [class^=foundation].news-detail .main .content ul li:before, .page[class^=foundation] .main .content ol li:before, [class^=foundation].faq .main .content ol li:before, [class^=foundation].error-page .main .content ol li:before, [class^=foundation].contact .main .content ol li:before, [class^=foundation].actual .main .content ol li:before, [class^=foundation].calenderPage .main .content ol li:before, [class^=foundation].job .main .content ol li:before, [class^=foundation].reference .main .content ol li:before, [class^=foundation].news-detail .main .content ol li:before, .page[class^=academy] .main .content ul li:before, [class^=academy].faq .main .content ul li:before, [class^=academy].error-page .main .content ul li:before, [class^=academy].contact .main .content ul li:before, [class^=academy].actual .main .content ul li:before, [class^=academy].calenderPage .main .content ul li:before, [class^=academy].job .main .content ul li:before, [class^=academy].reference .main .content ul li:before, [class^=academy].news-detail .main .content ul li:before, .page[class^=academy] .main .content ol li:before, [class^=academy].faq .main .content ol li:before, [class^=academy].error-page .main .content ol li:before, [class^=academy].contact .main .content ol li:before, [class^=academy].actual .main .content ol li:before, [class^=academy].calenderPage .main .content ol li:before, [class^=academy].job .main .content ol li:before, [class^=academy].reference .main .content ol li:before, [class^=academy].news-detail .main .content ol li:before {
color: #4e7f99;
}
.page[class^=services] .main .content a:not(.button), [class^=services].faq .main .content a:not(.button), [class^=services].error-page .main .content a:not(.button), [class^=services].contact .main .content a:not(.button), [class^=services].actual .main .content a:not(.button), [class^=services].calenderPage .main .content a:not(.button), [class^=services].job .main .content a:not(.button), [class^=services].reference .main .content a:not(.button), [class^=services].news-detail .main .content a:not(.button), .page[class^=foundation] .main .content a:not(.button), [class^=foundation].faq .main .content a:not(.button), [class^=foundation].error-page .main .content a:not(.button), [class^=foundation].contact .main .content a:not(.button), [class^=foundation].actual .main .content a:not(.button), [class^=foundation].calenderPage .main .content a:not(.button), [class^=foundation].job .main .content a:not(.button), [class^=foundation].reference .main .content a:not(.button), [class^=foundation].news-detail .main .content a:not(.button), .page[class^=academy] .main .content a:not(.button), [class^=academy].faq .main .content a:not(.button), [class^=academy].error-page .main .content a:not(.button), [class^=academy].contact .main .content a:not(.button), [class^=academy].actual .main .content a:not(.button), [class^=academy].calenderPage .main .content a:not(.button), [class^=academy].job .main .content a:not(.button), [class^=academy].reference .main .content a:not(.button), [class^=academy].news-detail .main .content a:not(.button) {
color: #4e7f99;
}
.page[class^=services] .main .content a:not(.button):hover, [class^=services].faq .main .content a:not(.button):hover, [class^=services].error-page .main .content a:not(.button):hover, [class^=services].contact .main .content a:not(.button):hover, [class^=services].actual .main .content a:not(.button):hover, [class^=services].calenderPage .main .content a:not(.button):hover, [class^=services].job .main .content a:not(.button):hover, [class^=services].reference .main .content a:not(.button):hover, [class^=services].news-detail .main .content a:not(.button):hover, .page[class^=foundation] .main .content a:not(.button):hover, [class^=foundation].faq .main .content a:not(.button):hover, [class^=foundation].error-page .main .content a:not(.button):hover, [class^=foundation].contact .main .content a:not(.button):hover, [class^=foundation].actual .main .content a:not(.button):hover, [class^=foundation].calenderPage .main .content a:not(.button):hover, [class^=foundation].job .main .content a:not(.button):hover, [class^=foundation].reference .main .content a:not(.button):hover, [class^=foundation].news-detail .main .content a:not(.button):hover, .page[class^=academy] .main .content a:not(.button):hover, [class^=academy].faq .main .content a:not(.button):hover, [class^=academy].error-page .main .content a:not(.button):hover, [class^=academy].contact .main .content a:not(.button):hover, [class^=academy].actual .main .content a:not(.button):hover, [class^=academy].calenderPage .main .content a:not(.button):hover, [class^=academy].job .main .content a:not(.button):hover, [class^=academy].reference .main .content a:not(.button):hover, [class^=academy].news-detail .main .content a:not(.button):hover {
color: #3d6377;
}
.page[class^=services] .main a.button, [class^=services].faq .main a.button, [class^=services].error-page .main a.button, [class^=services].contact .main a.button, [class^=services].actual .main a.button, [class^=services].calenderPage .main a.button, [class^=services].job .main a.button, [class^=services].reference .main a.button, [class^=services].news-detail .main a.button, .page[class^=foundation] .main a.button, [class^=foundation].faq .main a.button, [class^=foundation].error-page .main a.button, [class^=foundation].contact .main a.button, [class^=foundation].actual .main a.button, [class^=foundation].calenderPage .main a.button, [class^=foundation].job .main a.button, [class^=foundation].reference .main a.button, [class^=foundation].news-detail .main a.button, .page[class^=academy] .main a.button, [class^=academy].faq .main a.button, [class^=academy].error-page .main a.button, [class^=academy].contact .main a.button, [class^=academy].actual .main a.button, [class^=academy].calenderPage .main a.button, [class^=academy].job .main a.button, [class^=academy].reference .main a.button, [class^=academy].news-detail .main a.button {
background-color: #a1cee6;
}
.page[class^=services] .main a.button:hover, [class^=services].faq .main a.button:hover, [class^=services].error-page .main a.button:hover, [class^=services].contact .main a.button:hover, [class^=services].actual .main a.button:hover, [class^=services].calenderPage .main a.button:hover, [class^=services].job .main a.button:hover, [class^=services].reference .main a.button:hover, [class^=services].news-detail .main a.button:hover, .page[class^=foundation] .main a.button:hover, [class^=foundation].faq .main a.button:hover, [class^=foundation].error-page .main a.button:hover, [class^=foundation].contact .main a.button:hover, [class^=foundation].actual .main a.button:hover, [class^=foundation].calenderPage .main a.button:hover, [class^=foundation].job .main a.button:hover, [class^=foundation].reference .main a.button:hover, [class^=foundation].news-detail .main a.button:hover, .page[class^=academy] .main a.button:hover, [class^=academy].faq .main a.button:hover, [class^=academy].error-page .main a.button:hover, [class^=academy].contact .main a.button:hover, [class^=academy].actual .main a.button:hover, [class^=academy].calenderPage .main a.button:hover, [class^=academy].job .main a.button:hover, [class^=academy].reference .main a.button:hover, [class^=academy].news-detail .main a.button:hover {
background-color: #4e7f99;
}
.page[class^=services] .main .relevant-pages p, [class^=services].faq .main .relevant-pages p, [class^=services].error-page .main .relevant-pages p, [class^=services].contact .main .relevant-pages p, [class^=services].actual .main .relevant-pages p, [class^=services].calenderPage .main .relevant-pages p, [class^=services].job .main .relevant-pages p, [class^=services].reference .main .relevant-pages p, [class^=services].news-detail .main .relevant-pages p, .page[class^=foundation] .main .relevant-pages p, [class^=foundation].faq .main .relevant-pages p, [class^=foundation].error-page .main .relevant-pages p, [class^=foundation].contact .main .relevant-pages p, [class^=foundation].actual .main .relevant-pages p, [class^=foundation].calenderPage .main .relevant-pages p, [class^=foundation].job .main .relevant-pages p, [class^=foundation].reference .main .relevant-pages p, [class^=foundation].news-detail .main .relevant-pages p, .page[class^=academy] .main .relevant-pages p, [class^=academy].faq .main .relevant-pages p, [class^=academy].error-page .main .relevant-pages p, [class^=academy].contact .main .relevant-pages p, [class^=academy].actual .main .relevant-pages p, [class^=academy].calenderPage .main .relevant-pages p, [class^=academy].job .main .relevant-pages p, [class^=academy].reference .main .relevant-pages p, [class^=academy].news-detail .main .relevant-pages p {
color: #4e7f99;
}
.page[class^=services] .main .relevant-pages ul li a, [class^=services].faq .main .relevant-pages ul li a, [class^=services].error-page .main .relevant-pages ul li a, [class^=services].contact .main .relevant-pages ul li a, [class^=services].actual .main .relevant-pages ul li a, [class^=services].calenderPage .main .relevant-pages ul li a, [class^=services].job .main .relevant-pages ul li a, [class^=services].reference .main .relevant-pages ul li a, [class^=services].news-detail .main .relevant-pages ul li a, .page[class^=foundation] .main .relevant-pages ul li a, [class^=foundation].faq .main .relevant-pages ul li a, [class^=foundation].error-page .main .relevant-pages ul li a, [class^=foundation].contact .main .relevant-pages ul li a, [class^=foundation].actual .main .relevant-pages ul li a, [class^=foundation].calenderPage .main .relevant-pages ul li a, [class^=foundation].job .main .relevant-pages ul li a, [class^=foundation].reference .main .relevant-pages ul li a, [class^=foundation].news-detail .main .relevant-pages ul li a, .page[class^=academy] .main .relevant-pages ul li a, [class^=academy].faq .main .relevant-pages ul li a, [class^=academy].error-page .main .relevant-pages ul li a, [class^=academy].contact .main .relevant-pages ul li a, [class^=academy].actual .main .relevant-pages ul li a, [class^=academy].calenderPage .main .relevant-pages ul li a, [class^=academy].job .main .relevant-pages ul li a, [class^=academy].reference .main .relevant-pages ul li a, [class^=academy].news-detail .main .relevant-pages ul li a {
color: #a1cee6;
}
.page[class^=services] .main .relevant-pages ul li a:hover, [class^=services].faq .main .relevant-pages ul li a:hover, [class^=services].error-page .main .relevant-pages ul li a:hover, [class^=services].contact .main .relevant-pages ul li a:hover, [class^=services].actual .main .relevant-pages ul li a:hover, [class^=services].calenderPage .main .relevant-pages ul li a:hover, [class^=services].job .main .relevant-pages ul li a:hover, [class^=services].reference .main .relevant-pages ul li a:hover, [class^=services].news-detail .main .relevant-pages ul li a:hover, .page[class^=foundation] .main .relevant-pages ul li a:hover, [class^=foundation].faq .main .relevant-pages ul li a:hover, [class^=foundation].error-page .main .relevant-pages ul li a:hover, [class^=foundation].contact .main .relevant-pages ul li a:hover, [class^=foundation].actual .main .relevant-pages ul li a:hover, [class^=foundation].calenderPage .main .relevant-pages ul li a:hover, [class^=foundation].job .main .relevant-pages ul li a:hover, [class^=foundation].reference .main .relevant-pages ul li a:hover, [class^=foundation].news-detail .main .relevant-pages ul li a:hover, .page[class^=academy] .main .relevant-pages ul li a:hover, [class^=academy].faq .main .relevant-pages ul li a:hover, [class^=academy].error-page .main .relevant-pages ul li a:hover, [class^=academy].contact .main .relevant-pages ul li a:hover, [class^=academy].actual .main .relevant-pages ul li a:hover, [class^=academy].calenderPage .main .relevant-pages ul li a:hover, [class^=academy].job .main .relevant-pages ul li a:hover, [class^=academy].reference .main .relevant-pages ul li a:hover, [class^=academy].news-detail .main .relevant-pages ul li a:hover {
color: #79b9db;
}
.page[class^=services] .main .relevant-pages ul li a.active, [class^=services].faq .main .relevant-pages ul li a.active, [class^=services].error-page .main .relevant-pages ul li a.active, [class^=services].contact .main .relevant-pages ul li a.active, [class^=services].actual .main .relevant-pages ul li a.active, [class^=services].calenderPage .main .relevant-pages ul li a.active, [class^=services].job .main .relevant-pages ul li a.active, [class^=services].reference .main .relevant-pages ul li a.active, [class^=services].news-detail .main .relevant-pages ul li a.active, .page[class^=foundation] .main .relevant-pages ul li a.active, [class^=foundation].faq .main .relevant-pages ul li a.active, [class^=foundation].error-page .main .relevant-pages ul li a.active, [class^=foundation].contact .main .relevant-pages ul li a.active, [class^=foundation].actual .main .relevant-pages ul li a.active, [class^=foundation].calenderPage .main .relevant-pages ul li a.active, [class^=foundation].job .main .relevant-pages ul li a.active, [class^=foundation].reference .main .relevant-pages ul li a.active, [class^=foundation].news-detail .main .relevant-pages ul li a.active, .page[class^=academy] .main .relevant-pages ul li a.active, [class^=academy].faq .main .relevant-pages ul li a.active, [class^=academy].error-page .main .relevant-pages ul li a.active, [class^=academy].contact .main .relevant-pages ul li a.active, [class^=academy].actual .main .relevant-pages ul li a.active, [class^=academy].calenderPage .main .relevant-pages ul li a.active, [class^=academy].job .main .relevant-pages ul li a.active, [class^=academy].reference .main .relevant-pages ul li a.active, [class^=academy].news-detail .main .relevant-pages ul li a.active {
color: #4e7f99;
}
@media screen and (max-width: 840px) {
.page .content-placeholder .grey-block, .faq .content-placeholder .grey-block, .error-page .content-placeholder .grey-block, .contact .content-placeholder .grey-block, .actual .content-placeholder .grey-block, .calenderPage .content-placeholder .grey-block, .job .content-placeholder .grey-block, .reference .content-placeholder .grey-block, .news-detail .content-placeholder .grey-block {
display: none;
}
.page .grid-row, .faq .grid-row, .error-page .grid-row, .contact .grid-row, .actual .grid-row, .calenderPage .grid-row, .job .grid-row, .reference .grid-row, .news-detail .grid-row {
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.page .grid-row .right-icon, .faq .grid-row .right-icon, .error-page .grid-row .right-icon, .contact .grid-row .right-icon, .actual .grid-row .right-icon, .calenderPage .grid-row .right-icon, .job .grid-row .right-icon, .reference .grid-row .right-icon, .news-detail .grid-row .right-icon {
display: none;
}
.page .grid-row .page-impression, .faq .grid-row .page-impression, .error-page .grid-row .page-impression, .contact .grid-row .page-impression, .actual .grid-row .page-impression, .calenderPage .grid-row .page-impression, .job .grid-row .page-impression, .reference .grid-row .page-impression, .news-detail .grid-row .page-impression {
width: 100%;
right: 0;
padding-top: 0;
padding-bottom: 0;
}
.page .grid-row .page-impression .quote, .faq .grid-row .page-impression .quote, .error-page .grid-row .page-impression .quote, .contact .grid-row .page-impression .quote, .actual .grid-row .page-impression .quote, .calenderPage .grid-row .page-impression .quote, .job .grid-row .page-impression .quote, .reference .grid-row .page-impression .quote, .news-detail .grid-row .page-impression .quote {
display: none;
}
.page .grid-row .page-impression img.large, .faq .grid-row .page-impression img.large, .error-page .grid-row .page-impression img.large, .contact .grid-row .page-impression img.large, .actual .grid-row .page-impression img.large, .calenderPage .grid-row .page-impression img.large, .job .grid-row .page-impression img.large, .reference .grid-row .page-impression img.large, .news-detail .grid-row .page-impression img.large {
display: block;
}
.page .grid-row .page-impression img.medium, .faq .grid-row .page-impression img.medium, .error-page .grid-row .page-impression img.medium, .contact .grid-row .page-impression img.medium, .actual .grid-row .page-impression img.medium, .calenderPage .grid-row .page-impression img.medium, .job .grid-row .page-impression img.medium, .reference .grid-row .page-impression img.medium, .news-detail .grid-row .page-impression img.medium {
display: none;
}
.page .grid-row .page-impression .left-icon, .faq .grid-row .page-impression .left-icon, .error-page .grid-row .page-impression .left-icon, .contact .grid-row .page-impression .left-icon, .actual .grid-row .page-impression .left-icon, .calenderPage .grid-row .page-impression .left-icon, .job .grid-row .page-impression .left-icon, .reference .grid-row .page-impression .left-icon, .news-detail .grid-row .page-impression .left-icon {
display: none;
}
.page .main, .faq .main, .error-page .main, .contact .main, .actual .main, .calenderPage .main, .job .main, .reference .main, .news-detail .main {
width: 100%;
padding: 50px 8.3333333333%;
}
.page .main .return-link, .faq .main .return-link, .error-page .main .return-link, .contact .main .return-link, .actual .main .return-link, .calenderPage .main .return-link, .job .main .return-link, .reference .main .return-link, .news-detail .main .return-link {
height: auto;
}
.page .main .content h2, .faq .main .content h2, .error-page .main .content h2, .contact .main .content h2, .actual .main .content h2, .calenderPage .main .content h2, .job .main .content h2, .reference .main .content h2, .news-detail .main .content h2 {
font-size: 1.6rem;
margin: 20px 0 50px;
}
.page .main a.button, .faq .main a.button, .error-page .main a.button, .contact .main a.button, .actual .main a.button, .calenderPage .main a.button, .job .main a.button, .reference .main a.button, .news-detail .main a.button {
margin-top: 15px;
}
.page .main .relevant-pages, .faq .main .relevant-pages, .error-page .main .relevant-pages, .contact .main .relevant-pages, .actual .main .relevant-pages, .calenderPage .main .relevant-pages, .job .main .relevant-pages, .reference .main .relevant-pages, .news-detail .main .relevant-pages {
padding: 60px 0 0;
}
.page .content-placeholder:after, .faq .content-placeholder:after, .error-page .content-placeholder:after, .contact .content-placeholder:after, .actual .content-placeholder:after, .calenderPage .content-placeholder:after, .job .content-placeholder:after, .reference .content-placeholder:after, .news-detail .content-placeholder:after {
display: none;
}
}
@media screen and (max-width: 550px) {
.page .grid-row .page-impression img.large, .faq .grid-row .page-impression img.large, .error-page .grid-row .page-impression img.large, .contact .grid-row .page-impression img.large, .actual .grid-row .page-impression img.large, .calenderPage .grid-row .page-impression img.large, .job .grid-row .page-impression img.large, .reference .grid-row .page-impression img.large, .news-detail .grid-row .page-impression img.large {
display: none;
}
.page .grid-row .page-impression img.medium, .faq .grid-row .page-impression img.medium, .error-page .grid-row .page-impression img.medium, .contact .grid-row .page-impression img.medium, .actual .grid-row .page-impression img.medium, .calenderPage .grid-row .page-impression img.medium, .job .grid-row .page-impression img.medium, .reference .grid-row .page-impression img.medium, .news-detail .grid-row .page-impression img.medium {
display: block;
}
}
/*==========================================================================
* News overview page
* ========================================================================== */
.news .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
margin-top: -160px;
}
@media screen and (max-width: 840px) {
.news .image-wrapper {
background-image: none;
}
}
@media screen and (max-width: 680px) {
.news .news-overview .overview-placeholder .articles article, .news .photo-albums-overview .overview-placeholder .articles article, .news .jobs .jobs-overview .overview-placeholder .articles article, .jobs .news .jobs-overview .overview-placeholder .articles article, .news .references-overview .overview-placeholder .articles article, .news .services-ozapp .brochures-overview .overview-placeholder .articles article, .services-ozapp .news .brochures-overview .overview-placeholder .articles article {
height: auto;
width: 100%;
background-color: #0f46a1;
margin-bottom: 1px;
}
.news .news-overview .overview-placeholder .articles article:nth-of-type(odd), .news .photo-albums-overview .overview-placeholder .articles article:nth-of-type(odd), .news .jobs .jobs-overview .overview-placeholder .articles article:nth-of-type(odd), .jobs .news .jobs-overview .overview-placeholder .articles article:nth-of-type(odd), .news .references-overview .overview-placeholder .articles article:nth-of-type(odd), .news .services-ozapp .brochures-overview .overview-placeholder .articles article:nth-of-type(odd), .services-ozapp .news .brochures-overview .overview-placeholder .articles article:nth-of-type(odd) {
background-color: #1b71dd;
}
.news .news-overview .overview-placeholder .articles article a .content, .news .photo-albums-overview .overview-placeholder .articles article a .content, .news .jobs .jobs-overview .overview-placeholder .articles article a .content, .jobs .news .jobs-overview .overview-placeholder .articles article a .content, .news .references-overview .overview-placeholder .articles article a .content, .news .services-ozapp .brochures-overview .overview-placeholder .articles article a .content, .services-ozapp .news .brochures-overview .overview-placeholder .articles article a .content {
width: calc(100% - 120px);
padding: 25px;
min-height: 120px;
}
.news .news-overview .overview-placeholder .articles article a .content h3, .news .photo-albums-overview .overview-placeholder .articles article a .content h3, .news .jobs .jobs-overview .overview-placeholder .articles article a .content h3, .jobs .news .jobs-overview .overview-placeholder .articles article a .content h3, .news .references-overview .overview-placeholder .articles article a .content h3, .news .services-ozapp .brochures-overview .overview-placeholder .articles article a .content h3, .services-ozapp .news .brochures-overview .overview-placeholder .articles article a .content h3 {
font-size: 1.1rem;
}
.news .news-overview .overview-placeholder .articles article a .content .date, .news .photo-albums-overview .overview-placeholder .articles article a .content .date, .news .jobs .jobs-overview .overview-placeholder .articles article a .content .date, .jobs .news .jobs-overview .overview-placeholder .articles article a .content .date, .news .references-overview .overview-placeholder .articles article a .content .date, .news .services-ozapp .brochures-overview .overview-placeholder .articles article a .content .date, .services-ozapp .news .brochures-overview .overview-placeholder .articles article a .content .date {
font-size: 0.9rem;
}
.news[class^=vso] .news-overview .overview-placeholder .articles article, .news[class^=vso] .photo-albums-overview .overview-placeholder .articles article, .news[class^=vso] .jobs .jobs-overview .overview-placeholder .articles article, .jobs .news[class^=vso] .jobs-overview .overview-placeholder .articles article, .news[class^=vso] .references-overview .overview-placeholder .articles article, .news[class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article, .services-ozapp .news[class^=vso] .brochures-overview .overview-placeholder .articles article {
background-color: #25c6da;
}
.news[class^=vso] .news-overview .overview-placeholder .articles article:nth-of-type(odd), .news[class^=vso] .photo-albums-overview .overview-placeholder .articles article:nth-of-type(odd), .news[class^=vso] .jobs .jobs-overview .overview-placeholder .articles article:nth-of-type(odd), .jobs .news[class^=vso] .jobs-overview .overview-placeholder .articles article:nth-of-type(odd), .news[class^=vso] .references-overview .overview-placeholder .articles article:nth-of-type(odd), .news[class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article:nth-of-type(odd), .services-ozapp .news[class^=vso] .brochures-overview .overview-placeholder .articles article:nth-of-type(odd) {
background-color: #0098a6;
}
}
.news-overview, .photo-albums-overview, .jobs .jobs-overview, .references-overview, .services-ozapp .brochures-overview {
position: relative;
}
.news-overview .grid-row, .photo-albums-overview .grid-row, .jobs .jobs-overview .grid-row, .references-overview .grid-row, .services-ozapp .brochures-overview .grid-row {
position: relative;
}
.news-overview .grid-row .styling, .photo-albums-overview .grid-row .styling, .jobs .jobs-overview .grid-row .styling, .references-overview .grid-row .styling, .services-ozapp .brochures-overview .grid-row .styling {
position: absolute;
z-index: 3;
left: 0;
bottom: 25px;
width: 60px;
height: 212px;
}
.news-overview .grid-row .styling:after, .photo-albums-overview .grid-row .styling:after, .jobs .jobs-overview .grid-row .styling:after, .references-overview .grid-row .styling:after, .services-ozapp .brochures-overview .grid-row .styling:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -195px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
display: block;
}
[class^=vso] .news-overview .grid-row .styling:after, [class^=vso] .photo-albums-overview .grid-row .styling:after, [class^=vso] .jobs .jobs-overview .grid-row .styling:after, .jobs [class^=vso] .jobs-overview .grid-row .styling:after, [class^=vso] .references-overview .grid-row .styling:after, [class^=vso] .services-ozapp .brochures-overview .grid-row .styling:after, .services-ozapp [class^=vso] .brochures-overview .grid-row .styling:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -442px 0 no-repeat;
background-size: 502px 423px;
width: 60px;
height: 212px;
}
.news-overview:after, .photo-albums-overview:after, .jobs .jobs-overview:after, .references-overview:after, .services-ozapp .brochures-overview:after {
content: "";
position: absolute;
z-index: 0;
right: 0;
bottom: 0;
height: calc(100% - 120px);
width: 50%;
background-color: white;
}
.news-overview .overview-placeholder, .photo-albums-overview .overview-placeholder, .jobs .jobs-overview .overview-placeholder, .references-overview .overview-placeholder, .services-ozapp .brochures-overview .overview-placeholder {
position: relative;
z-index: 1;
background-color: white;
/* News items
* ========================================================================== */
}
.news-overview .overview-placeholder .overview-header, .photo-albums-overview .overview-placeholder .overview-header, .jobs .jobs-overview .overview-placeholder .overview-header, .references-overview .overview-placeholder .overview-header, .services-ozapp .brochures-overview .overview-placeholder .overview-header {
margin-bottom: 60px;
}
.news-overview .overview-placeholder .overview-header h1, .photo-albums-overview .overview-placeholder .overview-header h1, .jobs .jobs-overview .overview-placeholder .overview-header h1, .references-overview .overview-placeholder .overview-header h1, .services-ozapp .brochures-overview .overview-placeholder .overview-header h1 {
font-size: 2rem;
color: #0f46a1;
}
[class^=vso] .news-overview .overview-placeholder .overview-header h1, [class^=vso] .photo-albums-overview .overview-placeholder .overview-header h1, [class^=vso] .jobs .jobs-overview .overview-placeholder .overview-header h1, .jobs [class^=vso] .jobs-overview .overview-placeholder .overview-header h1, [class^=vso] .references-overview .overview-placeholder .overview-header h1, [class^=vso] .services-ozapp .brochures-overview .overview-placeholder .overview-header h1, .services-ozapp [class^=vso] .brochures-overview .overview-placeholder .overview-header h1 {
color: #0098a6;
}
.news-overview .overview-placeholder .overview-header .pagination, .photo-albums-overview .overview-placeholder .overview-header .pagination, .jobs .jobs-overview .overview-placeholder .overview-header .pagination, .references-overview .overview-placeholder .overview-header .pagination, .services-ozapp .brochures-overview .overview-placeholder .overview-header .pagination {
position: relative;
top: 17px;
}
.news-overview .overview-placeholder .return-link, .photo-albums-overview .overview-placeholder .return-link, .jobs .jobs-overview .overview-placeholder .return-link, .references-overview .overview-placeholder .return-link, .services-ozapp .brochures-overview .overview-placeholder .return-link {
height: 100px;
margin-top: 20px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.news-overview .overview-placeholder .return-link a, .photo-albums-overview .overview-placeholder .return-link a, .jobs .jobs-overview .overview-placeholder .return-link a, .references-overview .overview-placeholder .return-link a, .services-ozapp .brochures-overview .overview-placeholder .return-link a {
font-size: 0.8rem;
color: #4fc2f8;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.news-overview .overview-placeholder .return-link a:before, .photo-albums-overview .overview-placeholder .return-link a:before, .jobs .jobs-overview .overview-placeholder .return-link a:before, .references-overview .overview-placeholder .return-link a:before, .services-ozapp .brochures-overview .overview-placeholder .return-link a:before {
content: "";
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -134px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
transition: transform 0.3s;
}
.news-overview .overview-placeholder .return-link a:hover, .photo-albums-overview .overview-placeholder .return-link a:hover, .jobs .jobs-overview .overview-placeholder .return-link a:hover, .references-overview .overview-placeholder .return-link a:hover, .services-ozapp .brochures-overview .overview-placeholder .return-link a:hover {
color: #2196f3;
}
.news-overview .overview-placeholder .return-link a:hover:before, .photo-albums-overview .overview-placeholder .return-link a:hover:before, .jobs .jobs-overview .overview-placeholder .return-link a:hover:before, .references-overview .overview-placeholder .return-link a:hover:before, .services-ozapp .brochures-overview .overview-placeholder .return-link a:hover:before {
-webkit-transform: translate3d(-5px, 0, 0) rotate(180deg);
-moz-transform: translate3d(-5px, 0, 0) rotate(180deg);
-ms-transform: translate3d(-5px, 0, 0) rotate(180deg);
-o-transform: translate3d(-5px, 0, 0) rotate(180deg);
-spec-transform: translate3d(-5px, 0, 0) rotate(180deg);
transform: translate3d(-5px, 0, 0) rotate(180deg);
}
.news-overview .overview-placeholder .articles, .photo-albums-overview .overview-placeholder .articles, .jobs .jobs-overview .overview-placeholder .articles, .references-overview .overview-placeholder .articles, .services-ozapp .brochures-overview .overview-placeholder .articles {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.news-overview .overview-placeholder .articles article, .photo-albums-overview .overview-placeholder .articles article, .jobs .jobs-overview .overview-placeholder .articles article, .references-overview .overview-placeholder .articles article, .services-ozapp .brochures-overview .overview-placeholder .articles article {
width: calc((100% - 30px) / 2);
margin-bottom: 15px;
}
.news-overview .overview-placeholder .articles article a, .photo-albums-overview .overview-placeholder .articles article a, .jobs .jobs-overview .overview-placeholder .articles article a, .references-overview .overview-placeholder .articles article a, .services-ozapp .brochures-overview .overview-placeholder .articles article a {
position: relative;
display: block;
height: 100%;
text-decoration: none;
background-color: #1d88e6;
transition: background 0.4s;
}
.news-overview .overview-placeholder .articles article a figure, .photo-albums-overview .overview-placeholder .articles article a figure, .jobs .jobs-overview .overview-placeholder .articles article a figure, .references-overview .overview-placeholder .articles article a figure, .services-ozapp .brochures-overview .overview-placeholder .articles article a figure {
position: relative;
width: 100%;
height: 0;
padding-bottom: 57.2%;
overflow: hidden;
}
.news-overview .overview-placeholder .articles article a figure .overlay, .photo-albums-overview .overview-placeholder .articles article a figure .overlay, .jobs .jobs-overview .overview-placeholder .articles article a figure .overlay, .references-overview .overview-placeholder .articles article a figure .overlay, .services-ozapp .brochures-overview .overview-placeholder .articles article a figure .overlay {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #4fc2f8;
background-size: cover;
background-position: center;
transform: scale3d(1, 1, 1);
transition: transform 0.7s;
}
.news-overview .overview-placeholder .articles article a .content, .photo-albums-overview .overview-placeholder .articles article a .content, .jobs .jobs-overview .overview-placeholder .articles article a .content, .references-overview .overview-placeholder .articles article a .content, .services-ozapp .brochures-overview .overview-placeholder .articles article a .content {
position: relative;
z-index: 5;
padding: 30px;
min-height: 137px;
}
.news-overview .overview-placeholder .articles article a .content h3, .photo-albums-overview .overview-placeholder .articles article a .content h3, .jobs .jobs-overview .overview-placeholder .articles article a .content h3, .references-overview .overview-placeholder .articles article a .content h3, .services-ozapp .brochures-overview .overview-placeholder .articles article a .content h3 {
color: white;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
}
@media screen and (max-width: 1000px) {
.news-overview .overview-placeholder .articles article a .content h3, .photo-albums-overview .overview-placeholder .articles article a .content h3, .jobs .jobs-overview .overview-placeholder .articles article a .content h3, .references-overview .overview-placeholder .articles article a .content h3, .services-ozapp .brochures-overview .overview-placeholder .articles article a .content h3 {
font-size: 0.9rem;
}
}
.news-overview .overview-placeholder .articles article a .content .date, .photo-albums-overview .overview-placeholder .articles article a .content .date, .jobs .jobs-overview .overview-placeholder .articles article a .content .date, .references-overview .overview-placeholder .articles article a .content .date, .services-ozapp .brochures-overview .overview-placeholder .articles article a .content .date {
color: #4fc2f8;
font-size: 0.9rem;
line-height: 1.2;
font-weight: 600;
}
@media screen and (max-width: 1000px) {
.news-overview .overview-placeholder .articles article a .content .date, .photo-albums-overview .overview-placeholder .articles article a .content .date, .jobs .jobs-overview .overview-placeholder .articles article a .content .date, .references-overview .overview-placeholder .articles article a .content .date, .services-ozapp .brochures-overview .overview-placeholder .articles article a .content .date {
font-size: 0.7rem;
}
}
[class^=vso] .news-overview .overview-placeholder .articles article a, [class^=vso] .photo-albums-overview .overview-placeholder .articles article a, [class^=vso] .jobs .jobs-overview .overview-placeholder .articles article a, .jobs [class^=vso] .jobs-overview .overview-placeholder .articles article a, [class^=vso] .references-overview .overview-placeholder .articles article a, [class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article a, .services-ozapp [class^=vso] .brochures-overview .overview-placeholder .articles article a {
background-color: #0098a6;
}
[class^=vso] .news-overview .overview-placeholder .articles article a figure span, [class^=vso] .photo-albums-overview .overview-placeholder .articles article a figure span, [class^=vso] .jobs .jobs-overview .overview-placeholder .articles article a figure span, .jobs [class^=vso] .jobs-overview .overview-placeholder .articles article a figure span, [class^=vso] .references-overview .overview-placeholder .articles article a figure span, [class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article a figure span, .services-ozapp [class^=vso] .brochures-overview .overview-placeholder .articles article a figure span {
background-color: #25c6da;
}
[class^=vso] .news-overview .overview-placeholder .articles article a .content .date, [class^=vso] .photo-albums-overview .overview-placeholder .articles article a .content .date, [class^=vso] .jobs .jobs-overview .overview-placeholder .articles article a .content .date, .jobs [class^=vso] .jobs-overview .overview-placeholder .articles article a .content .date, [class^=vso] .references-overview .overview-placeholder .articles article a .content .date, [class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article a .content .date, .services-ozapp [class^=vso] .brochures-overview .overview-placeholder .articles article a .content .date {
color: #B2EBF2;
}
[class^=vso] .news-overview .overview-placeholder .articles article a:hover, [class^=vso] .photo-albums-overview .overview-placeholder .articles article a:hover, [class^=vso] .jobs .jobs-overview .overview-placeholder .articles article a:hover, .jobs [class^=vso] .jobs-overview .overview-placeholder .articles article a:hover, [class^=vso] .references-overview .overview-placeholder .articles article a:hover, [class^=vso] .services-ozapp .brochures-overview .overview-placeholder .articles article a:hover, .services-ozapp [class^=vso] .brochures-overview .overview-placeholder .articles article a:hover {
background-color: #25c6da;
}
.news-overview .overview-placeholder .articles article a:hover, .photo-albums-overview .overview-placeholder .articles article a:hover, .jobs .jobs-overview .overview-placeholder .articles article a:hover, .references-overview .overview-placeholder .articles article a:hover, .services-ozapp .brochures-overview .overview-placeholder .articles article a:hover {
background-color: #1b71dd;
}
.news-overview .overview-placeholder .articles article a:hover figure .overlay, .photo-albums-overview .overview-placeholder .articles article a:hover figure .overlay, .jobs .jobs-overview .overview-placeholder .articles article a:hover figure .overlay, .references-overview .overview-placeholder .articles article a:hover figure .overlay, .services-ozapp .brochures-overview .overview-placeholder .articles article a:hover figure .overlay {
transform: scale3d(1.06, 1.06, 1);
}
@media screen and (max-width: 1280px) {
.news-overview .overview-placeholder .articles article, .photo-albums-overview .overview-placeholder .articles article, .jobs .jobs-overview .overview-placeholder .articles article, .references-overview .overview-placeholder .articles article, .services-ozapp .brochures-overview .overview-placeholder .articles article {
width: 100%;
}
}
@media screen and (max-width: 840px) {
.news-overview .overview-placeholder .articles article, .photo-albums-overview .overview-placeholder .articles article, .jobs .jobs-overview .overview-placeholder .articles article, .references-overview .overview-placeholder .articles article, .services-ozapp .brochures-overview .overview-placeholder .articles article {
width: calc((100% - 15px) / 2);
}
}
@media screen and (max-width: 450px) {
.news-overview .overview-placeholder .articles article, .photo-albums-overview .overview-placeholder .articles article, .jobs .jobs-overview .overview-placeholder .articles article, .references-overview .overview-placeholder .articles article, .services-ozapp .brochures-overview .overview-placeholder .articles article {
width: 100%;
}
}
.news-overview .overview-placeholder .overview-placeholder__pagination, .photo-albums-overview .overview-placeholder .overview-placeholder__pagination, .jobs .jobs-overview .overview-placeholder .overview-placeholder__pagination, .references-overview .overview-placeholder .overview-placeholder__pagination, .services-ozapp .brochures-overview .overview-placeholder .overview-placeholder__pagination {
width: 100%;
padding: 40px 0;
text-align: center;
}
@media screen and (max-width: 840px) {
.news-overview .grid-row, .photo-albums-overview .grid-row, .jobs .jobs-overview .grid-row, .references-overview .grid-row, .services-ozapp .brochures-overview .grid-row {
width: 100%;
}
.news-overview .styling, .photo-albums-overview .styling, .jobs .jobs-overview .styling, .references-overview .styling, .services-ozapp .brochures-overview .styling {
display: none;
}
.news-overview .overview-placeholder, .photo-albums-overview .overview-placeholder, .jobs .jobs-overview .overview-placeholder, .references-overview .overview-placeholder, .services-ozapp .brochures-overview .overview-placeholder {
width: 100%;
padding: 0;
margin-left: 0;
}
.news-overview .overview-placeholder .overview-header, .photo-albums-overview .overview-placeholder .overview-header, .jobs .jobs-overview .overview-placeholder .overview-header, .references-overview .overview-placeholder .overview-header, .services-ozapp .brochures-overview .overview-placeholder .overview-header {
width: 85.7142857143%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.news-overview .overview-placeholder .overview-header h1, .photo-albums-overview .overview-placeholder .overview-header h1, .jobs .jobs-overview .overview-placeholder .overview-header h1, .references-overview .overview-placeholder .overview-header h1, .services-ozapp .brochures-overview .overview-placeholder .overview-header h1 {
font-size: 1.6rem;
line-height: 1.2;
margin-top: 20px;
width: 100%;
}
.news-overview .overview-placeholder .overview-header .pagination, .photo-albums-overview .overview-placeholder .overview-header .pagination, .jobs .jobs-overview .overview-placeholder .overview-header .pagination, .references-overview .overview-placeholder .overview-header .pagination, .services-ozapp .brochures-overview .overview-placeholder .overview-header .pagination {
width: 100%;
text-align: center;
top: 0;
}
.news-overview .overview-placeholder .overview-header .pagination li, .photo-albums-overview .overview-placeholder .overview-header .pagination li, .jobs .jobs-overview .overview-placeholder .overview-header .pagination li, .references-overview .overview-placeholder .overview-header .pagination li, .services-ozapp .brochures-overview .overview-placeholder .overview-header .pagination li {
margin-top: 30px;
}
.news-overview .overview-placeholder .return-link, .photo-albums-overview .overview-placeholder .return-link, .jobs .jobs-overview .overview-placeholder .return-link, .references-overview .overview-placeholder .return-link, .services-ozapp .brochures-overview .overview-placeholder .return-link {
height: auto;
width: 85.7142857143%;
margin-left: auto;
margin-right: auto;
}
}
/*==========================================================================
* News detail page
* ========================================================================== */
.news-detail {
/* Sidebar with images and latest news
* ========================================================================== */
/* Mobile view
* ========================================================================== */
}
.news-detail .content-placeholder .left-icon {
bottom: 10%;
}
.news-detail .main {
padding: 0;
}
.news-detail .main > .main-placeholder .content h1 {
margin-bottom: 0;
}
.news-detail .main > .main-placeholder .content h2 {
font-size: 1.4rem;
margin-top: 30px;
margin-bottom: 5px;
}
.news-detail .main > .main-placeholder .content .date {
display: inline-block;
font-size: 0.9rem;
color: #4fc2f8;
margin: 10px 0 50px;
}
.news-detail .main.newsletter > .main-placeholder .content h1 {
color: #4fc2f8;
font-weight: 400;
margin-bottom: 85px;
}
.news-detail .main.newsletter > .main-placeholder .content h1 small {
display: block;
font-size: 1.5rem;
color: #0f46a1;
font-weight: 700;
}
.news-detail .main.newsletter > .main-placeholder .content .button {
margin-top: 10px;
}
.news-detail .main.newsletter > .main-placeholder .content .button:after {
display: none;
}
.news-detail .main.newsletter > .main-placeholder .content .privacy {
margin-top: 60px;
margin-bottom: 100px;
font-size: 0.75rem;
opacity: 0.5;
}
.news-detail .main .relevant-pages {
padding-top: 80px;
}
.news-detail .image-and-latest-news {
position: relative;
z-index: 3;
right: -4.1666666667%;
width: 37.5%;
vertical-align: top;
padding-top: 60px;
overflow: visible;
}
.news-detail .image-and-latest-news figure {
position: relative;
width: 100%;
padding-bottom: 75%;
margin-bottom: 60px;
background-color: #0f46a1;
}
.news-detail .image-and-latest-news figure .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 0.4s;
}
.news-detail .image-and-latest-news figure .image.active {
opacity: 1;
z-index: 2;
}
.news-detail .image-and-latest-news figure .image span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.news-detail .image-and-latest-news figure .image span.medium {
display: none;
}
@media screen and (max-width: 1200px) {
.news-detail .image-and-latest-news figure .image span.large {
display: none;
}
.news-detail .image-and-latest-news figure .image span.medium {
display: block;
}
}
.news-detail .image-and-latest-news figure .image-slider-nav {
position: absolute;
right: 0;
bottom: 0;
z-index: 5;
width: 16.6666666667%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
background-color: #add582;
min-width: 80px;
}
.news-detail .image-and-latest-news figure .image-slider-nav .nav-button {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 50px;
width: 50%;
background-color: transparent;
transition: background-color 0.3s;
cursor: pointer;
}
.news-detail .image-and-latest-news figure .image-slider-nav .nav-button:after {
content: "";
position: relative;
top: 2px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
display: inline-block;
opacity: 1;
}
.news-detail .image-and-latest-news figure .image-slider-nav .nav-button.previous:after {
transform: rotate(180deg);
}
.news-detail .image-and-latest-news figure .image-slider-nav .nav-button:hover {
background-color: #9bbf75;
}
.news-detail .image-and-latest-news .latest-news-side-block {
position: relative;
padding: 60px 0 0;
background-color: #f06292;
}
.news-detail .image-and-latest-news .latest-news-side-block p {
color: white;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
padding: 0 60px;
}
@media screen and (max-width: 1000px) {
.news-detail .image-and-latest-news .latest-news-side-block p {
padding: 0 40px;
}
}
.news-detail .image-and-latest-news .latest-news-side-block ul {
list-style: none;
padding: 0 60px 35px;
margin: 20px 0 0;
}
@media screen and (max-width: 1000px) {
.news-detail .image-and-latest-news .latest-news-side-block ul {
padding: 0 40px 20px;
}
}
.news-detail .image-and-latest-news .latest-news-side-block ul li {
position: relative;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
text-decoration: none;
color: white;
font-size: 0.9rem;
line-height: 1.2;
padding: 8px 0;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li a p {
font-weight: 700;
font-size: 0.9rem;
padding: 0;
margin: 0;
width: calc(100% - 140px);
opacity: 1;
transition: opacity 0.2s;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li a span {
font-weight: 400;
opacity: 0.5;
width: 140px;
}
@media screen and (max-width: 1300px) {
.news-detail .image-and-latest-news .latest-news-side-block ul li a {
display: block;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li a p {
width: 100%;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li a span {
display: block;
width: 100%;
}
}
.news-detail .image-and-latest-news .latest-news-side-block ul li:hover p {
opacity: 0.5;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li.active p {
opacity: 1;
}
.news-detail .image-and-latest-news .latest-news-side-block ul li.active:before {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
position: absolute;
left: -30px;
top: 13px;
}
@media screen and (max-width: 1000px) {
.news-detail .image-and-latest-news .latest-news-side-block ul li.active:before {
left: -25px;
}
}
.news-detail .image-and-latest-news .latest-news-side-block ul li.active a span {
opacity: 1;
font-weight: 700;
}
.news-detail .image-and-latest-news .latest-news-side-block .latest-news-footer {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 60px;
text-decoration: none;
font-weight: 700;
color: white;
background-color: #eb407a;
transition: background-color 0.3s;
}
.news-detail .image-and-latest-news .latest-news-side-block .latest-news-footer:after {
content: "";
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 15px;
margin-right: -22px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.news-detail .image-and-latest-news .latest-news-side-block .latest-news-footer:hover {
background-color: #e9296a;
}
.news-detail .image-and-latest-news .latest-news-side-block .latest-news-footer:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.news-detail[class^=vso] .main .content .date {
color: #25c6da;
}
.news-detail[class^=vso] .main.newsletter > .main-placeholder .content h1 {
color: #0098a6;
}
.news-detail[class^=vso] .main.newsletter > .main-placeholder .content h1 small {
color: #25c6da;
}
.news-detail[class^=vso] .image-and-latest-news figure {
background-color: #25c6da;
}
.news-detail[class^=vso] .image-and-latest-news figure .image-slider-nav {
background-color: #25c6da;
}
.news-detail[class^=vso] .image-and-latest-news figure .image-slider-nav .nav-button:hover {
background-color: #0098a6;
}
.news-detail[class^=vso] .image-and-latest-news .latest-news-side-block {
background-color: #ffb200;
}
.news-detail[class^=vso] .image-and-latest-news .latest-news-side-block .latest-news-footer {
background-color: #ffa200;
}
.news-detail[class^=vso] .image-and-latest-news .latest-news-side-block .latest-news-footer:hover {
background-color: #f59c00;
}
@media screen and (max-width: 840px) {
.news-detail .image-and-latest-news {
right: 0;
width: 100%;
padding-top: 0;
}
.news-detail .image-and-latest-news figure {
margin-bottom: 0;
}
.news-detail .image-and-latest-news figure .image span.medium {
display: none;
}
.news-detail .image-and-latest-news figure .image span.large {
display: block;
}
.news-detail .image-and-latest-news .latest-news-side-block {
display: none;
}
.news-detail .main .main-placeholder {
padding: 50px 7.1428571429%;
}
.news-detail .main .relevant-pages {
padding-top: 0;
}
}
@media screen and (max-width: 550px) {
.news-detail .image-and-latest-news figure .image span.medium {
display: block;
}
.news-detail .image-and-latest-news figure .image span.large {
display: none;
}
}
/*==========================================================================
* reference page
* ========================================================================== */
.reference {
/* Sidebar with images and streamer
* ========================================================================== */
/* Other references
* ========================================================================== */
/* Mobile View
* ========================================================================== */
}
.reference .main a.button {
margin-top: 60px;
margin-bottom: 50px;
}
.reference .image-and-streamer {
position: relative;
z-index: 3;
right: -4.1666666667%;
width: 37.5%;
vertical-align: top;
padding-top: 60px;
overflow: visible;
}
.reference .image-and-streamer figure {
position: relative;
width: 100%;
background-color: #0f46a1;
}
.reference .image-and-streamer figure img {
width: 100%;
}
.reference .image-and-streamer figure img.medium {
display: none;
}
.reference .image-and-streamer figure img.small {
display: none;
}
.reference .image-and-streamer figure img.active {
display: block;
}
@media screen and (max-width: 1420px) {
.reference .image-and-streamer figure img.large {
display: none;
}
.reference .image-and-streamer figure img.medium {
display: block;
}
}
.reference .image-and-streamer figure span {
position: absolute;
right: 0;
bottom: 0;
background-color: #add582;
padding: 10px 20px;
color: white;
font-size: 1.2rem;
font-weight: 700;
}
.reference .image-and-streamer .streamer {
height: 240px;
background-color: #f06292;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
margin-bottom: 30px;
}
.reference .image-and-streamer .streamer p {
margin: 0;
padding: 0 10%;
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: 1.4rem;
font-style: italic;
text-align: center;
}
.reference .other-references {
margin-top: 60px;
}
.reference .other-references h2 {
font-size: 1.05rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 15px;
}
.reference .other-references .references-placeholder {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.reference .other-references .references-placeholder .other-reference {
position: relative;
width: 120px;
height: 120px;
border-radius: 100%;
background-position: 50% 25%;
background-size: cover;
margin-bottom: 30px;
margin-right: 30px;
}
.reference .other-references .references-placeholder .other-reference p {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 100%;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
font-size: 0.8rem;
font-weight: 600;
background-color: rgba(15, 70, 161, 0.8);
color: #4fc2f8;
opacity: 0.4;
text-indent: -100px;
transition: opacity 0.3s, text-indent 0.3s;
}
.reference .other-references .references-placeholder .other-reference:hover p {
opacity: 0;
}
.reference[class^=vso] .image-and-streamer .streamer {
background-color: #25c6da;
}
.reference[class^=vso] .image-and-streamer figure {
background-color: #25c6da;
}
.reference[class^=vso] .image-and-streamer figure span {
background-color: #ffb200;
}
.reference[class^=vso] .other-references h2 {
color: #0098a6;
}
.reference[class^=vso] .other-references .other-reference p {
background-color: rgba(0, 152, 166, 0.8);
color: #80deea;
}
@media screen and (max-width: 840px) {
.reference .main {
width: 62.5%;
}
.reference .main a.button {
margin-top: 15px;
margin-bottom: 0;
}
.reference .main .content h1 {
margin: 20px 0 50px;
}
.reference .image-and-streamer {
padding-top: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
right: 0;
}
.reference .image-and-streamer .styling {
display: none;
}
.reference .other-references {
margin-top: 50px;
}
.reference .other-references .references-placeholder .other-reference {
width: 100px;
height: 100px;
}
}
@media screen and (max-width: 600px) {
.reference .image-and-streamer {
width: 100%;
padding-top: 40px;
}
.reference .image-and-streamer figure {
width: 85.7142857143%;
max-width: 330px;
margin: auto;
}
.reference .image-and-streamer .streamer {
height: 175px;
-webkit-order: 2;
-ms-order: 2;
order: 2;
width: 85.7142857143%;
margin: 40px auto 0;
}
.reference .image-and-streamer .streamer p {
font-size: 1.2rem;
}
.reference .main {
width: 100%;
}
}
.references .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
margin-top: -160px;
}
@media screen and (max-width: 840px) {
.references .image-wrapper {
background-image: none;
}
}
.references-overview:after {
background-color: transparent;
}
.references-overview .overview-placeholder {
background-color: transparent;
}
@media screen and (max-width: 840px) {
.references-overview .overview-placeholder .articles {
width: 85.7142857143%;
}
}
@media screen and (max-width: 500px) {
.references-overview .overview-placeholder .articles {
width: 100%;
}
}
.references-overview .overview-placeholder .articles article {
height: auto;
width: calc((100% - 15px) / 2);
}
.references-overview .overview-placeholder .articles article a {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
background-color: #9bbf75;
transition: background-color 0.3s;
}
.references-overview .overview-placeholder .articles article a figure {
width: 40%;
position: relative;
background-color: transparent;
padding-bottom: 0 !important;
padding-top: 0 !important;
height: auto;
}
.references-overview .overview-placeholder .articles article a figure:after {
display: none;
}
.references-overview .overview-placeholder .articles article a figure .figure-placeholder {
position: relative;
width: 100%;
height: 0;
padding-top: 125%;
}
@media screen and (max-width: 1280px) {
.references-overview .overview-placeholder .articles article a figure .figure-placeholder {
padding-top: 175%;
}
}
.references-overview .overview-placeholder .articles article a figure span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
}
.references-overview .overview-placeholder .articles article a .content {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px 40px;
height: 100%;
width: 60%;
font-size: 1rem;
line-height: 1.4;
color: white;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.references-overview .overview-placeholder .articles article a .content .placeholder {
text-align: center;
}
.references-overview .overview-placeholder .articles article a .content p {
margin: 0;
font-style: italic;
}
.references-overview .overview-placeholder .articles article a .content span {
font-weight: 700;
}
.references-overview .overview-placeholder .articles article a .content .button {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #82af52;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding: 0;
transition: background-color 0.3s;
}
@media screen and (max-width: 700px) {
.references-overview .overview-placeholder .articles article a .content .button {
font-size: 0.9rem;
height: 35px;
}
}
.references-overview .overview-placeholder .articles article a .content .button:after {
content: "";
position: relative;
top: 2px;
display: inline-block;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 15px;
transition: transform 0.3s;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.references-overview .overview-placeholder .articles article a:hover {
background-color: #82af52;
}
.references-overview .overview-placeholder .articles article a:hover .content .button {
background-color: #759e49;
}
.references-overview .overview-placeholder .articles article a:hover .content .button:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
[class^=vso] .references-overview .overview-placeholder .articles article a {
background-color: #0098a6;
}
[class^=vso] .references-overview .overview-placeholder .articles article a .content .button {
background-color: #00818d;
}
[class^=vso] .references-overview .overview-placeholder .articles article a:hover {
background-color: #00818d;
}
[class^=vso] .references-overview .overview-placeholder .articles article a:hover .content .button {
background-color: #006973;
}
@media screen and (max-width: 950px) {
.references-overview .overview-placeholder .articles article a .content {
font-size: 0.9rem;
}
}
@media screen and (max-width: 650px) {
.references-overview .overview-placeholder .articles article {
width: 100%;
}
.references-overview .overview-placeholder .articles article a .content {
font-size: 1.2rem;
}
.references-overview .overview-placeholder .articles article a figure {
padding-top: 50%;
}
}
@media screen and (max-width: 400px) {
.references-overview .overview-placeholder .articles article a .content {
font-size: 1rem;
}
.references-overview .overview-placeholder .articles article a figure {
padding-top: 60%;
}
}
.references-overview .overview-placeholder .pagination.bottom {
text-align: center;
margin-top: 25px;
}
/*==========================================================================
* job page
* ========================================================================== */
.job {
/* Sidebar with images and streamer
* ========================================================================== */
/* Other jobs
* ========================================================================== */
/* Mobile View
* ========================================================================== */
}
.job .main a.button {
margin-top: 60px;
margin-bottom: 50px;
}
.job .image-and-streamer {
position: relative;
z-index: 3;
right: -4.1666666667%;
width: 37.5%;
vertical-align: top;
padding-top: 60px;
overflow: visible;
}
.job .image-and-streamer figure {
position: relative;
width: 100%;
background-color: #0f46a1;
}
.job .image-and-streamer figure img {
width: 100%;
}
.job .image-and-streamer figure img.medium {
display: none;
}
.job .image-and-streamer figure img.small {
display: none;
}
.job .image-and-streamer figure img.active {
display: block;
}
@media screen and (max-width: 1420px) {
.job .image-and-streamer figure img.large {
display: none;
}
.job .image-and-streamer figure img.medium {
display: block;
}
}
.job .image-and-streamer figure span {
position: absolute;
right: 0;
bottom: 0;
background-color: #add582;
padding: 10px 20px;
color: white;
font-size: 1.2rem;
font-weight: 700;
}
.job .image-and-streamer .streamer {
height: 240px;
background-color: #f06292;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
margin-bottom: 30px;
}
.job .image-and-streamer .streamer p {
margin: 0;
padding: 0 10%;
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: 1.4rem;
font-style: italic;
text-align: center;
}
.job .other-jobs {
margin-top: 60px;
}
.job .other-jobs h2 {
font-size: 1.05rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 15px;
}
.job .other-jobs .jobs-placeholder {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.job .other-jobs .jobs-placeholder .other-job {
position: relative;
width: 120px;
height: 120px;
border-radius: 100%;
background-position: 50% 25%;
background-size: cover;
margin-bottom: 30px;
margin-right: 30px;
}
.job .other-jobs .jobs-placeholder .other-job p {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 100%;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
font-size: 0.8rem;
font-weight: 600;
background-color: rgba(15, 70, 161, 0.8);
color: #4fc2f8;
opacity: 0.4;
text-indent: -100px;
transition: opacity 0.3s, text-indent 0.3s;
}
.job .other-jobs .jobs-placeholder .other-job:hover p {
opacity: 0;
}
@media screen and (max-width: 840px) {
.job .main {
width: 62.5%;
}
.job .main a.button {
margin-top: 15px;
margin-bottom: 0;
}
.job .main .content h1 {
margin: 20px 0 50px;
}
.job .image-and-streamer {
padding-top: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
right: 0;
}
.job .image-and-streamer .styling {
display: none;
}
.job .other-jobs {
margin-top: 50px;
}
.job .other-jobs .jobs-placeholder .other-job {
width: 100px;
height: 100px;
}
}
@media screen and (max-width: 600px) {
.job .image-and-streamer {
width: 100%;
padding-top: 40px;
}
.job .image-and-streamer figure {
width: 85.7142857143%;
max-width: 330px;
margin: auto;
}
.job .image-and-streamer .streamer {
height: 175px;
-webkit-order: 2;
-ms-order: 2;
order: 2;
width: 85.7142857143%;
margin: 40px auto 0;
}
.job .image-and-streamer .streamer p {
font-size: 1.2rem;
}
.job .main {
width: 100%;
}
}
.jobs .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
margin-top: -160px;
}
@media screen and (max-width: 840px) {
.jobs .image-wrapper {
background-image: none;
}
}
.jobs .jobs-overview {
padding-top: 10%;
padding-bottom: 100px;
margin-top: -5%;
background-color: white;
}
@media screen and (min-width: 1550px) {
.jobs .jobs-overview {
margin-top: -200px;
}
}
@media screen and (min-width: 1400px) {
.jobs .jobs-overview {
margin-top: -10%;
}
}
@media screen and (max-width: 840px) {
.jobs .jobs-overview {
padding-bottom: 0;
}
}
.jobs .jobs-overview:after {
background-color: #a1cee6;
width: 25%;
bottom: auto;
top: 0;
height: 100%;
}
.jobs .jobs-overview .grid-row .styling {
left: -30px;
bottom: -50%;
}
.jobs .jobs-overview .grid-row .overview-placeholder {
padding: 0;
background-color: transparent;
}
.jobs .jobs-overview .grid-row .overview-placeholder .overview-header {
margin-bottom: 30px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .overview-header--additional-top {
margin-top: 60px;
}
.jobs .jobs-overview .grid-row .overview-placeholder h4 {
color: #4fc2f8;
font-size: 16px;
}
@media screen and (max-width: 840px) {
.jobs .jobs-overview .grid-row .overview-placeholder h4 {
width: 100%;
}
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles {
padding-top: 0;
}
@media screen and (max-width: 840px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles {
width: 85.7142857143%;
}
}
@media screen and (max-width: 500px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles {
width: 100%;
}
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article {
width: 100%;
max-width: 650px;
position: relative;
margin-bottom: 30px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content {
height: 100%;
width: 100%;
font-size: 1rem;
line-height: 1.4;
color: #737373;
background-color: #F2F2F2;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content {
padding: 15px 25px 25px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 16px;
}
@media screen and (max-width: 1200px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info {
flex-direction: column;
align-items: center;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info svg {
margin-top: 16px;
}
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info .job-info__item {
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
font-size: 16px;
line-height: 24px;
color: #737373;
text-align: center;
margin-bottom: 16px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info .job-info__item svg {
margin-bottom: 8px;
color: #ffb200;
}
@media screen and (max-width: 1200px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content .inner-content .job-info .job-info__item {
width: 75%;
}
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content h2 {
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
background-color: #ffb200;
width: 100%;
padding: 15px 25px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content p, .jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a {
font-size: 16px;
line-height: 24px;
color: #737373;
margin: 0;
max-width: none;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a {
position: relative;
display: block;
margin-top: 20px;
background-color: transparent;
transition: none;
font-weight: bold;
font-size: 16px;
line-height: 1;
color: #425963;
padding-left: 30px;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a:before {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 20px;
height: 25px;
background: transparent url("/img/download_icon.svg") no-repeat;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a.no-icon {
padding-left: 0;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a.no-icon:before {
display: none;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a.no-icon:after {
content: "";
position: absolute;
top: -1px;
left: 117px;
width: 18px;
height: 18px;
background: transparent url("/img/arrow.svg") no-repeat;
background-size: cover;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a span {
font-weight: normal;
color: #78a0b4;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a:hover {
color: #567582;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article .content a:hover span {
color: #4fc2f8;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article.intern .content h2 {
background-color: #78a0b4;
}
@media screen and (max-width: 950px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 0.9rem;
}
}
@media screen and (max-width: 650px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles article {
width: 100%;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 1.2rem;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article a figure {
padding-top: 50%;
}
}
@media screen and (max-width: 400px) {
.jobs .jobs-overview .grid-row .overview-placeholder .articles article a .content {
font-size: 1rem;
}
.jobs .jobs-overview .grid-row .overview-placeholder .articles article a figure {
padding-top: 60%;
}
}
.jobs .jobs-overview .grid-row .overview-placeholder .pagination.bottom {
text-align: center;
margin-top: 25px;
}
.jobs .jobs-overview .grid-row .overview-image {
z-index: 20;
width: 50%;
margin-right: -8.3333333333%;
vertical-align: top;
}
.jobs .jobs-overview .grid-row .overview-image .image img {
width: 100%;
}
@media screen and (max-width: 840px) {
.jobs .jobs-overview .grid-row .overview-image {
width: 100%;
margin-right: 0;
margin-left: 0;
line-height: 0;
}
}
.jobs .dynamic-block .image span {
background-position: 0 48.5%;
}
.jobs .dynamic-block .button:after {
margin-left: 60px;
}
.calenderPage {
/* Mobile view
* ========================================================================== */
}
.calenderPage .main {
width: 54.1666666667%;
padding: 0;
}
.calenderPage .main a.button {
margin-top: 15px;
margin-bottom: 30px;
}
@media screen and (max-width: 840px) {
.calenderPage .main {
width: 100%;
}
.calenderPage .main .content h1 {
margin-bottom: 0;
font-size: 1.6rem;
}
.calenderPage .main .main-placeholder {
padding: 50px 7.1428571429% 20px;
}
.calenderPage .main .relevant-pages {
padding: 0;
}
.calenderPage .calenderOverview article {
margin-left: 0;
}
.calenderPage .calenderOverview article .date {
width: 108px;
}
.calenderPage .calenderOverview article p {
margin-left: 5%;
width: calc(100% - 100px - 5px - 6%);
}
.calenderPage .calenderOverview h3, .calenderPage .calenderOverview h4 {
padding: 0 0% 0 calc(12% + 105px);
}
}
.actual .content-placeholder .left-icon {
bottom: 120px;
}
.actual h1 {
font-size: 1.6rem;
color: #0f46a1;
margin-bottom: 40px;
}
.actual .page-impression {
width: 37.5%;
padding-top: 60px;
padding-bottom: 0;
}
.actual .page-impression .calender {
top: 0;
width: 66.6666666667%;
}
.actual .page-impression .vacation-link {
margin-top: 60px;
height: 180px;
width: 66.6666666667%;
background-color: #fca309;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
transition: background-color 0.3s;
}
.actual .page-impression .vacation-link a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: 1.2rem;
text-align: center;
font-weight: 700;
text-decoration: none;
}
.actual .page-impression .vacation-link p {
margin: 0;
padding: 0 10%;
width: 100%;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.actual .page-impression .vacation-link span {
font-size: 0.9rem;
font-weight: 400;
margin-top: 10px;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.actual .page-impression .vacation-link span:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 10px;
transition: transform 0.3s;
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
-spec-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
.actual .page-impression .vacation-link:hover {
background-color: #ee9803;
}
.actual .page-impression .vacation-link:hover span:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.actual .main {
width: 62.5%;
padding: 60px 0 0;
overflow: visible;
}
.actual .main .main-placeholder {
padding: 0 6.6666666667% 0 13.3333333333%;
}
.actual .main .header-placeholder {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 100%;
}
.actual .main .header-placeholder h3 {
font-size: 1.05rem;
font-weight: 700;
color: #0f46a1;
margin: 0 0 15px;
}
.actual .main .header-placeholder a {
font-size: 0.9rem;
color: #4fc2f8;
text-decoration: none;
margin-bottom: 12px;
}
.actual .main .header-placeholder a:after {
content: "";
margin-left: 5px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -134px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.actual .main .header-placeholder a:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.actual .main .next-news-items {
padding-left: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.actual .main .next-news-items .button.mobile {
display: none;
margin-left: 7.1428571429%;
background-color: #fca309;
}
.actual .main .next-news-items .button.mobile:hover {
background-color: #ee9803;
}
.actual .main .relevant-pages {
padding-top: 60px;
}
.actual .latest-news-item {
position: relative;
width: 100%;
left: -6.6666666667%;
}
.actual .latest-news-item.mobile {
display: none;
}
@media screen and (max-width: 840px) {
.actual .latest-news-item.mobile {
display: block;
left: 0;
margin-bottom: 50px;
}
.actual .latest-news-item.desktop {
display: none;
}
}
.actual .latest-news-item a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
text-decoration: none;
}
.actual .latest-news-item a figure {
width: 66.6666666667%;
height: 400px;
background-image: url("/img/no-image.jpg");
background-position: center;
background-size: cover;
}
.actual .latest-news-item a .content {
width: 33.3333333333%;
padding: 65px 30px;
height: 400px;
background-color: #9bbf75;
color: white;
font-size: 0.9rem;
transition: background-color 0.3s;
}
.actual .latest-news-item a .content .highlighted {
font-weight: 700;
opacity: 0.7;
}
.actual .latest-news-item a .content h2 {
font-size: 1.2rem;
font-weight: 700;
color: white;
margin: 15px 0 20px;
}
.actual .latest-news-item a:hover .content {
background-color: #82af52;
}
.actual[class^=vso] h1 {
color: #0098a6;
}
.actual[class^=vso] .latest-news-item a .content {
background-color: #0098a6;
}
.actual[class^=vso] .latest-news-item a .content h2 {
color: white;
}
.actual[class^=vso] .latest-news-item a:hover .content {
background-color: #008592;
}
.actual[class^=vso] .main .header-placeholder h3 {
color: #0098a6;
}
.actual[class^=vso] .main .header-placeholder a {
color: #25c6da;
}
.actual[class^=vso] .main .header-placeholder a:after {
background: url("/img/zuiderbos-sprite.min.svg?v=3") -148px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
}
@media screen and (max-width: 1280px) {
.actual .page-impression {
width: 50%;
}
.actual .page-impression .vacation-link, .actual .page-impression .calender {
width: 75%;
}
.actual .main {
width: 50%;
}
.actual .main .latest-news-item a .content, .actual .main .latest-news-item a figure {
width: 50%;
height: 280px;
}
.actual .main .latest-news-item a .content {
padding: 40px 30px;
}
.actual .main .latest-news-item a .content h2 {
margin-top: 5px;
}
}
@media screen and (max-width: 840px) {
.actual .image-wrapper {
background: none !important;
}
.actual h1 {
display: block;
}
.actual .page-impression {
order: 2;
}
.actual .page-impression .vacation-link, .actual .page-impression .calender {
width: 100%;
}
.actual .page-impression .vacation-link {
margin-top: 0;
}
.actual .main {
order: 1;
width: 100%;
min-height: 0 !important;
padding-top: 0;
}
.actual .main .latest-news-item {
width: 93.3333333333%;
left: 0;
}
.actual .main .latest-news-item a figure {
width: 66.6666666667%;
}
.actual .main .latest-news-item a .content {
width: 33.3333333333%;
}
.actual .main .main-placeholder {
width: 85.7142857143%;
margin: auto;
padding: 50px 0;
}
.actual .main .main-placeholder .relevant-pages {
padding-top: 50px;
}
}
@media screen and (max-width: 650px) {
.actual .latest-news-item {
width: 100%;
}
.actual .latest-news-item a {
display: block;
}
.actual .latest-news-item a figure {
width: 100%;
height: 0;
padding-bottom: 65%;
}
.actual .latest-news-item a .content {
width: 100%;
height: auto;
padding: 50px 30px;
}
}
@media screen and (max-width: 500px) {
.actual .main .header-placeholder {
width: 85.7142857143%;
margin: auto;
}
.actual .main .main-placeholder .relevant-pages {
width: 85.7142857143%;
margin: auto;
}
}
@media screen and (max-width: 360px) {
.actual .main .header-placeholder a {
display: none;
}
.actual .main .next-news-items .button.mobile {
display: block;
margin-top: 30px;
}
}
/*==========================================================================
* Photo Albums overview page
* ========================================================================== */
.photo-albums .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
margin-top: -160px;
}
.photo-albums-overview {
/* Photo Albums items
* ========================================================================== */
}
.photo-albums-overview .photo-albums-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.photo-albums-overview .photo-albums-row article {
width: calc((100% - 30px) / 3);
height: 240px;
margin-bottom: 15px;
}
@media screen and (max-width: 1400px) {
.photo-albums-overview .photo-albums-row article {
width: calc((100% - 15px) / 2);
height: 280px;
}
.photo-albums-overview .photo-albums-row article a figure {
height: 240px;
}
}
@media screen and (max-width: 1000px) {
.photo-albums-overview .photo-albums-row article a .content {
padding-top: 11px;
padding-bottom: 10px;
}
}
/*==========================================================================
* Photo album page
* ========================================================================== */
.photo-album {
/* Photo album content
* ========================================================================== */
}
.photo-album .white-styling-block {
position: relative;
height: 160px;
width: 100%;
background-color: white;
margin-top: -160px;
}
.photo-album .content-placeholder {
position: relative;
}
.photo-album .content-placeholder .background {
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 120px);
width: 50%;
background-color: white;
}
.photo-album .main {
position: relative;
z-index: 5;
background-color: white;
padding: 0 7.1428571429%;
}
.photo-album .main .return-link {
height: 120px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.photo-album .main .return-link a {
font-size: 0.8rem;
color: #4fc2f8;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.photo-album .main .return-link a:before {
content: "";
margin-right: 10px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -134px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) rotate(180deg);
-moz-transform: translate3d(0, 0, 0) rotate(180deg);
-ms-transform: translate3d(0, 0, 0) rotate(180deg);
-o-transform: translate3d(0, 0, 0) rotate(180deg);
-spec-transform: translate3d(0, 0, 0) rotate(180deg);
transform: translate3d(0, 0, 0) rotate(180deg);
transition: transform 0.3s;
}
.photo-album .main .return-link a:hover {
color: #2196f3;
}
.photo-album .main .return-link a:hover:before {
-webkit-transform: translate3d(-5px, 0, 0) rotate(180deg);
-moz-transform: translate3d(-5px, 0, 0) rotate(180deg);
-ms-transform: translate3d(-5px, 0, 0) rotate(180deg);
-o-transform: translate3d(-5px, 0, 0) rotate(180deg);
-spec-transform: translate3d(-5px, 0, 0) rotate(180deg);
transform: translate3d(-5px, 0, 0) rotate(180deg);
}
.photo-album .main h1 {
font-size: 2rem;
color: #0f46a1;
margin-bottom: 60px;
}
[class^=vso] .photo-album .main h1 {
color: #0098a6;
}
.photo-album .main .images {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.photo-album .main .images a {
width: calc((100% - 30px) / 3);
margin-right: 15px;
margin-bottom: 15px;
}
.photo-album .main .images a:nth-of-type(3n + 3) {
margin-right: 0;
}
.photo-album .main .images .image {
width: 100%;
padding-bottom: 66.9%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: #f1f1f1;
}
.contact {
/* Mobile view
* ========================================================================== */
}
.contact .page-impression {
padding-bottom: 0;
}
.contact .page-impression #map > div {
height: 104.7% !important;
}
.contact .content {
margin-top: 120px;
}
.contact .content .content-divider {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.contact .content .content-divider .contact-info, .contact .content .content-divider .faq {
width: 50%;
}
.contact .content .content-divider .contact-info p, .contact .content .content-divider .faq p {
margin-top: 0;
}
.contact .content .content-divider .contact-info p strong, .contact .content .content-divider .faq p strong {
color: #0f46a1;
}
.contact .content .content-divider .contact-info p a, .contact .content .content-divider .faq p a {
border-bottom: none;
}
.contact .content .content-divider .contact-info .button, .contact .content .content-divider .faq .button {
margin-top: 15px;
}
.contact .location-description, .contact .contact-form {
color: #737373;
font-size: 0.9rem;
}
.contact .location-description h2, .contact .contact-form h2 {
font-size: 1rem;
max-width: 580px;
color: #0f46a1;
margin: 0;
}
.contact .location-description p, .contact .contact-form p {
margin: 0;
}
.contact .contact-form {
margin-top: 40px;
padding-bottom: 170px;
}
.contact .location-description {
margin-top: 20px;
}
.contact .form {
max-width: 420px;
}
.contact .form .form-element label {
color: #0f46a1;
font-weight: 600;
font-size: 0.9rem;
}
.contact[class^=vso] .content .content-divider .contact-info p strong, .contact[class^=vso] .content .content-divider .faq p strong {
color: #0098a6;
}
.contact[class^=vso] .location-description h2, .contact[class^=vso] .contact-form h2 {
color: #0098a6;
}
.contact[class^=vso] .form .form-element label {
color: #0098a6;
}
.contact[class^=services] .content .content-divider .contact-info p strong, .contact[class^=services] .content .content-divider .faq p strong {
color: #4e7f99;
}
.contact[class^=services] .location-description h2, .contact[class^=services] .contact-form h2 {
color: #4e7f99;
}
.contact[class^=services] .form .form-element label {
color: #4e7f99;
}
@media screen and (max-width: 840px) {
.contact .grid-row .page-impression {
-webkit-order: 2;
-ms-order: 2;
order: 2;
}
.contact .grid-row .main {
-webkit-order: 1;
-ms-order: 1;
order: 1;
}
.contact .content {
margin-top: 0;
}
.contact .location-description {
padding-bottom: 0;
}
}
@media screen and (max-width: 600px) {
.contact .content .content-divider {
display: block;
}
.contact .content .content-divider .contact-info, .contact .content .content-divider .faq {
width: 100%;
}
.contact .content .content-divider .faq {
margin: 60px 0;
}
.contact .content .content-divider .faq p {
max-width: 280px;
}
}
.services .home-intro .home-blocks {
white-space: normal;
}
.services .home-intro .home-blocks .home-link-block {
height: 300px;
}
.sitemap .main .content h1 {
margin-top: 60px;
}
@media screen and (max-width: 840px) {
.sitemap .main .content h1 {
margin-top: 0;
}
}
.sitemap #school-sitemap {
padding: 20px 0 80px;
font-size: 1.2rem;
}
@media screen and (max-width: 840px) {
.sitemap #school-sitemap {
padding-bottom: 0;
}
}
.sitemap #school-sitemap > li {
padding-left: 0;
}
.sitemap #school-sitemap > li:before {
display: none;
}
.sitemap #school-sitemap > li a {
font-weight: 700;
}
.sitemap #school-sitemap ul {
padding-left: 40px;
padding-bottom: 20px;
font-size: 0.85em;
}
.sitemap #school-sitemap > ul {
padding-left: 20px;
}
.sitemap #school-sitemap li:before {
top: 6px;
}
.sitemap #school-sitemap li a {
padding: 3px 0;
border-bottom-color: transparent;
border-bottom-style: dotted;
display: block;
}
.sitemap #school-sitemap li a:hover {
border-bottom-color: rgba(51, 51, 51, 0.4);
}
.sitemap.global-sitemap .main {
width: 100%;
}
.sitemap.global-sitemap .image-wrapper header {
padding-bottom: 300px;
}
.sitemap.global-sitemap .sitemap-container {
background-color: #e8eaf6;
margin-top: -200px;
}
@media screen and (max-width: 840px) {
.sitemap.global-sitemap .sitemap-container {
margin-top: 0;
}
}
.sitemap.global-sitemap .sitemap-container .sitemaps {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list {
width: 50%;
padding: 20px 0 80px;
font-size: 1.2rem;
}
@media screen and (max-width: 1000px) {
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list {
width: 100%;
}
}
@media screen and (max-width: 840px) {
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list {
padding-bottom: 0;
}
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list > li {
padding-left: 0;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list > li:before {
display: none;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list > li a {
font-weight: 700;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list ul {
padding-left: 40px;
padding-bottom: 20px;
font-size: 0.85em;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list > ul {
padding-left: 20px;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list li:before {
top: 6px;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list li a {
padding: 3px 0;
display: block;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list li a:hover {
color: #0f46a1;
font-weight: bold;
}
.sitemap.global-sitemap .sitemap-container .sitemaps .sitemap-list li:nth-child(even) {
background-color: whitesmoke;
}
.error-page .main {
padding-top: 120px;
}
.error-page .main .content h2 {
margin-bottom: 5px;
font-size: 0.9rem;
line-height: 1.6;
}
.error-page .main .content p {
margin-top: 0;
}
.error-page .main .content p a:not(.button) {
color: #4fc2f8;
border-bottom: none;
}
.error-page .main .content .buttons {
margin-top: 90px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding-bottom: 40px;
}
.error-page .main .content .buttons .button {
width: calc(50% - 20px);
min-width: 210px;
margin-top: 10px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.error-page .main .content .buttons .home {
margin-right: 30px;
background-color: #4fc2f8;
transition: background-color 0.3s;
}
.error-page .main .content .buttons .home:hover {
background-color: #1eb1f6;
}
.faq .page-impression .faq-not-found {
background-color: #f06292;
margin-top: 28px;
padding: 40px 10%;
font-size: 1.2rem;
color: #e8eaf6;
}
.faq .page-impression .faq-not-found h3 {
font-weight: 700;
margin: 0 0 25px;
}
.faq .page-impression .faq-not-found p {
font-size: 0.9rem;
}
.faq .page-impression .faq-not-found a {
color: white;
text-decoration: none;
}
.faq .page-impression .faq-not-found a:before {
content: "";
display: inline-block;
margin-right: 15px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -167px -102px no-repeat;
background-size: 502px 423px;
width: 17px;
height: 16px;
}
.faq .main.faq-items .content {
padding: 60px 0;
}
.faq .main.faq-items .content h1 {
margin-bottom: 120px;
}
.faq .main.faq-items .content .faq-item {
font-size: 0.9rem;
color: #737373;
background-color: white;
transition: background-color 0.3s;
}
.faq .main.faq-items .content .faq-item .name {
position: relative;
margin: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
padding: 11px 32px 11px 22px;
cursor: pointer;
background-color: transparent;
}
.faq .main.faq-items .content .faq-item .name:after {
content: "+";
position: absolute;
top: 8px;
right: 10px;
display: block;
color: #0f46a1;
font-size: 1.6rem;
line-height: 1;
font-weight: 400 !important;
}
.faq .main.faq-items .content .faq-item .answer {
color: #737373;
padding: 0 22px;
overflow: hidden;
transition: height 0.5s;
}
.faq .main.faq-items .content .faq-item .answer h2 {
font-size: 1.2rem;
margin-top: 26px;
margin-bottom: 5px;
}
.faq .main.faq-items .content .faq-item .answer p {
margin: 0;
}
.faq .main.faq-items .content .faq-item .answer strong {
color: black;
font-weight: 600;
}
.faq .main.faq-items .content .faq-item.hide .answer {
height: 0 !important;
}
.faq .main.faq-items .content .faq-item.active .name {
background-color: #0f46a1;
color: white;
font-weight: 700;
}
.faq .main.faq-items .content .faq-item.active .name:after {
content: "-";
color: white;
right: 12px;
}
.faq .main.faq-items .content .faq-item.active .answer {
display: block;
}
.faq .main.faq-items .content .faq-item:hover {
background-color: #f9f9f9;
}
.faq .main.faq-items .content .faq-item:nth-child(even) {
background-color: #f2f2f2;
}
.faq .main.faq-items .content .faq-item:nth-child(even):hover {
background-color: #ececec;
}
.faq[class^=vso] .page-impression .faq-not-found {
background-color: #25c6da;
}
.faq[class^=vso] .main.faq-items .content .faq-item .name:after {
color: #0098a6;
}
.faq[class^=vso] .main.faq-items .content .faq-item.active .name {
background-color: #0098a6;
}
.faq[class^=vso] .main.faq-items .content .faq-item.active .name:after {
color: white;
}
@media screen and (max-width: 840px) {
.faq .page-impression .faq-not-found {
display: none;
}
.faq .main {
min-height: 0 !important;
}
.faq .main.faq-items .content {
padding: 0;
}
.faq .main.faq-items .content h1 {
margin-bottom: 50px;
}
}
.search .page-impression .link-block {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 180px;
width: 75%;
text-decoration: none;
color: white;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.4;
text-align: center;
transition: background-color 0.3s;
}
.search .page-impression .link-block p {
margin: 0;
}
.search .page-impression .link-block span {
font-size: 0.9rem;
font-weight: 400;
opacity: 0.7;
}
.search .page-impression .link-block span:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-left: 15px;
transition: transform 0.3s;
}
.search .page-impression .link-block:hover span:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.search .page-impression .faq-block {
height: 180px;
padding: 0;
background-color: #fca309;
margin-bottom: 60px;
}
.search .page-impression .faq-block:hover {
background-color: #fdb63b;
}
.search .page-impression .sitemap-block {
background-color: #f06292;
}
.search .page-impression .sitemap-block:hover {
background-color: #ee4b82;
}
.search .main .content h1 {
margin: 60px 0 10px;
}
.search .main .content #inline-search-form {
position: relative;
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: transparent;
transition: background-color 0.5s, width 0.5s;
}
.search .main .content #inline-search-form input {
position: relative;
width: 100%;
padding-left: 20px;
padding-right: 120px;
height: 60px;
font-size: 1rem;
color: #0f46a1;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-spec-appearance: none;
appearance: none;
background-color: #f1f1f1;
border: none;
border-radius: 30px;
}
.search .main .content #inline-search-form input:focus {
outline: none;
}
.search .main .content #inline-search-form input:-webkit-autofill, .search .main .content #inline-search-form input:-webkit-autofill:hover, .search .main .content #inline-search-form input:-webkit-autofill:focus, .search .main .content #inline-search-form input:-webkit-autofill:active {
transition: 9999s background-color;
-webkit-text-fill-color: #0f46a1;
transition-delay: 9999s;
}
.search .main .content #inline-search-form input::-webkit-input-placeholder {
color: #0f46a1;
}
.search .main .content #inline-search-form input::-moz-placeholder {
color: #0f46a1;
}
.search .main .content #inline-search-form input:-moz-placeholder {
color: #0f46a1;
}
.search .main .content #inline-search-form input:-ms-input-placeholder {
color: #0f46a1;
}
.search .main .content #inline-search-form input[type=submit] {
display: none;
}
.search .main .content #inline-search-form .submit-button {
position: absolute;
right: 0;
top: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 120px;
height: 60px;
cursor: pointer;
color: white;
border-radius: 0 30px 30px 0;
font-weight: 700;
transition: opacity 0.3s, background-color 0.3s;
background-color: #4fc2f8;
}
.search .main .content #inline-search-form .submit-button:after {
content: "";
background: url("/img/zuiderbos-sprite.min.svg?v=3") -120px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.search .main .content #inline-search-form .submit-button:hover {
background-color: #1eb1f6;
}
.search .main .content #inline-search-form .submit-button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.search .main .content p {
margin: 0;
font-size: 1.05rem;
color: #4fc2f8;
}
.search .main .content p span {
font-weight: 700;
}
.search .main .content p span.amount {
font-size: 1.2rem;
font-weight: 400;
}
.search .main .content .search-results {
margin-top: 75px;
}
.search .main .content .search-results h2 {
color: #0f46a1;
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 45px;
}
.search .main .content .search-results ul {
padding-left: 0;
}
.search .main .content .search-results ul li {
position: relative;
padding: 0;
background-color: #f2f2f2;
transition: background-color 0.3s;
}
.search .main .content .search-results ul li:before {
display: none;
}
.search .main .content .search-results ul li:after {
content: "";
display: inline-block;
position: absolute;
top: 24px;
right: 20px;
background: url("/img/zuiderbos-sprite.min.svg?v=3") -176px -78px no-repeat;
background-size: 502px 423px;
width: 14px;
height: 10px;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.search .main .content .search-results ul li a {
display: block;
padding: 15px 20px;
border-bottom: none;
}
.search .main .content .search-results ul li a span {
font-size: 0.65rem;
font-weight: bold;
}
.search .main .content .search-results ul li:hover {
background-color: #ececec;
}
.search .main .content .search-results ul li:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.search .main .content .search-results ul li:nth-child(even) {
background-color: transparent;
}
.search .main .content .search-results ul li:nth-child(even):hover {
background-color: #f9f9f9;
}
.search .main .content .cantFindSitemap {
margin: 80px 0 160px;
}
.search .main .content .cantFindSitemap h4 {
color: #0f46a1;
font-size: 0.9rem;
font-weight: 600;
}
.search .main .content .cantFindSitemap p {
font-size: 0.9rem;
color: #737373;
}
.search .main .content .cantFindSitemap .button {
margin-top: 15px;
}
.search[class^=vso] .main .content #inline-search-form input {
color: #0098a6;
}
.search[class^=vso] .main .content #inline-search-form input::-webkit-input-placeholder {
color: #0098a6;
}
.search[class^=vso] .main .content #inline-search-form input::-moz-placeholder {
color: #0098a6;
}
.search[class^=vso] .main .content #inline-search-form input:-moz-placeholder {
color: #0098a6;
}
.search[class^=vso] .main .content #inline-search-form input:-ms-input-placeholder {
color: #0098a6;
}
.search[class^=vso] .main .content #inline-search-form .submit-button {
background-color: #6be9f2;
}
.search[class^=vso] .main .content #inline-search-form .submit-button:hover {
background-color: #33e1ed;
}
.search[class^=vso] .main .content .search-results h2 {
color: #0098a6;
}
.search[class^=vso] .main .content .cantFindSitemap h4 {
color: #0098a6;
}
.l-container {
width: 85.7142857143%;
max-width: 1680px;
margin: 0 auto;
}
.t-nieuwbouw__intro {
padding-bottom: 40px;
}
.o-vlog {
padding-top: 40px;
padding-bottom: 40px;
background-color: #1d88e6;
color: white;
}
.o-vlog--white {
background-color: white;
color: #737373;
}
.o-vlog__content {
display: grid;
gap: 32px;
grid-template-columns: 65fr 85fr;
}
@media screen and (max-width: 900px) {
.o-vlog__content {
grid-template-columns: 1fr;
}
}
.o-vlog__content--reversed {
grid-template-columns: 85fr 65fr;
}
@media screen and (max-width: 900px) {
.o-vlog__content--reversed {
grid-template-columns: 1fr;
}
}
.o-vlog__text {
grid-row: 1;
}
@media screen and (max-width: 900px) {
.o-vlog__text {
grid-template-columns: 1fr;
}
}
.o-vlog__content--reversed .o-vlog__text {
grid-column: 1;
}
.o-vlog__video {
grid-row: 1;
width: 100%;
aspect-ratio: 16/9;
}
@media screen and (max-width: 900px) {
.o-vlog__video {
grid-row: 2;
grid-column: -1 1;
}
}
.o-construction-steps {
width: 100%;
}
@media screen and (min-width: 1350px) {
.u-hide-on-desktop {
display: none;
}
}
/*# sourceMappingURL=style.css.map */