/* ==========================================================================
Styling and layout for all media
========================================================================== */
/* Reset
========================================================================== */
/**
* Add the correct display in Edge, IE 11, and Firefox.
*/
details,
main {
display: block;
}
/**
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/**
* Add the correct display in IE 11.
*/
template {
display: none;
}
/**
* Remove tap delay in modern browsers.
*/
a,
input,
button {
touch-action: manipulation;
}
/* Clearfix
========================================================================== */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.container::after,
.paginator::after {
display: table;
clear: both;
content: "";
}
/* ==========================================================================
Styling and layout for screen media (mobile first)
========================================================================== */
@media screen {
/* Layout
========================================================================== */
/**
* 1. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
/* 1 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
height: 100%; /* to help place footer to bottom of page */
box-sizing: border-box;
overflow-y: scroll;
background-color: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(240,240,240,0.95)) 22%, to(#ddd)) fixed;
background: -webkit-linear-gradient(top, rgba(240,240,240,0.95) 22%, #ddd) fixed;
background: -o-linear-gradient(top, rgba(240,240,240,0.95) 22%, #ddd) fixed;
background: linear-gradient(to bottom, rgba(240,240,240,0.95) 22%, #ddd) fixed;
}
/**
* 1. Set `body` to `relative` to allow positioning of absolute elements.
* 2. Remove default margin.
*/
body {
/* 1 */
position: relative;
/* 2 */
margin: 0;
min-height: 100%; /* to push footer to bottom of page */
overflow: hidden;
}
.body-portfolio {
background: #fff;
}
/**
* Outer wrapper for main layouts.
*
* Example HTML:
*
*
*/
.wrapper {
height: 100%; /* to help continue the crinkle pattern */
background:
radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px,
-webkit-gradient(linear, left top, left bottom, from(rgba(240,240,240,0.99)), to(#ddd)) fixed;
background:
-webkit-radial-gradient(100% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
-webkit-radial-gradient(0% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px,
-webkit-linear-gradient(top, rgba(240,240,240,0.99), #ddd) fixed;
background:
-o-radial-gradient(100% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
-o-radial-gradient(0% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px,
-o-linear-gradient(top, rgba(240,240,240,0.99), #ddd) fixed;
background:
radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px,
linear-gradient(to bottom, rgba(240,240,240,0.99), #ddd) fixed;
background-color: slategray;
background-size:75px 100px, 75px 100px, 100%;
background-repeat: repeat repeat no-repeat;
padding: 0;
padding-top: 0.5rem;
border-bottom: 0;
}
.wrapper-portfolio {
padding: 0;
border-bottom: 0px solid #cccccc;
}
/**
* Wrapper for layouts, and for site header/footer.
*
* Example HTML:
*
*
*/
.site-header {
position: relative;
width: 100%;
margin: 0 auto;
}
.container {
width: 96%;
max-width: 54em;
margin: 0 auto;
}
/**
* Additional styling for child content within site header.
*/
.site-header {
background-color: #ffffff;
background-image: -webkit-linear-gradient(270deg,rgba(0,120,180,0.75) 0%,rgba(240,240,240,0.95) 85%),url(/images/1.jpg);
background-image: -moz-linear-gradient(270deg,rgba(0,120,180,0.75) 0%,rgba(240,240,240,0.95) 85%),url(/images/1.jpg);
background-image: -o-linear-gradient(270deg,rgba(0,120,180,0.75) 0%,rgba(240,240,240,0.95) 85%),url(/images/1.jpg);
background-image: linear-gradient(180deg,rgba(0,120,180,0.75) 0%,rgba(240,240,240,0.95) 85%),url(/images/1.jpg);
background-position: bottom left, /* this positions the first image */ bottom left; /* this positions the second image */
background-size: 100% 100%, /* this sizes the first image */ cover; /* this sizes the second image */
background-repeat: no-repeat, no-repeat;
color: #dddddd;
position: relative;
}
.site-header-portfolio {
background-color: #ffffff;
background-image: -webkit-linear-gradient(270deg,rgba(208,255,255,0) 0%,rgba(56,37,34,0) 100%),url(/nl/images/8.jpg);
background-image: -moz-linear-gradient(270deg,rgba(208,255,255,0) 0%,rgba(56,37,34,0) 100%),url(/nl/images/8.jpg);
background-image: -o-linear-gradient(270deg,rgba(208,255,255,0) 0%,rgba(56,37,34,0) 100%),url(/nl/images/8.jpg);
background-image: linear-gradient(180deg,rgba(208,255,255,0) 0%,rgba(56,37,34,0) 100%),url(/nl/images/8.jpg);
background-position: bottom left, /* this positions the first image */ bottom left; /* this positions the second image */
background-size: 100% 100%, /* this sizes the first image */ cover; /* this sizes the second image */
background-repeat: no-repeat, no-repeat;
color: #dddddd;
position: relative;
}
.site-header {
text-align: center;
}
.site-header .logo {
transform-origin: bottom right;
transition: transform 0.4s;
display: inline-block;
padding: 0;
}
.site-header .logo:hover, .site-header .logo:active, .site-header .logo:focus {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
}
.site-header h2 {
margin: 1rem 1rem 0 0.5rem;
font-family: 'Jura', sans-serif;
font-weight: 300;
font-size: 1.4rem;
position: absolute;
top: 0px;
left: 0px;
text-indent: -9999px;
}
.site-header h3 {
margin: 0.25rem 1rem 0 0.5rem;
font-family: 'Jura', sans-serif;
font-size: 1rem;
font-style: italic;
font-weight: 100;
line-height: 1.4;
position: absolute;
top: 0px;
left: 0px;
text-indent: -9999px;
}
/**
* Additional styling for child content within site footer.
*/
.site-footer {
width: 100%;
margin: 0 auto;
padding: 0.5em 0;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.site-footer {
text-align: center;
}
/**
* Styling for articles.
*
* 1. Prevent really, really long words in article from breaking layout.
*/
.article {
/* font van de articles vergroten zonder dat allerlei andere maten ook meegaan */
font-size: 1.125rem;
/* regelafstand vergoten */
line-height: 1.65;
margin-bottom: 2em;
/* 1 */
word-wrap: break-word;
}
/**
* Styling for complementary content.
*
* Initially the sidebar appears under main content, it is then repositioned
* with media queries at 2nd breakpoint.
*
* 1. Prevent really, really long words in article from breaking layout.
*/
.complementary-content {
clear: both;
margin: 0 -6% 2.5rem; /* 2.5rem bottom-margin to prevent overlap with footer in mobile view */
padding: 0 6%;
/* 1 */
word-wrap: break-word;
}
/* Navigation
========================================================================== */
/**
* Style mobile first version of the navigation menu. Desktop version will
* override some rules with extra styling at 1st breakpoint.
*
* Example HTML:
*
*
*/
.site-navigation {
/* background-color: #aaffff; */
/* margin-bottom: 0.5em; */
}
/* tigcomment: selects any div that is a child of .site-navigation */
.site-navigation > div {
position: relative;
max-width: 54em;
margin: 0 auto;
}
.site-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-navigation li {
border-bottom: 1px solid #000000;
}
.site-navigation li:first-child {
border-top: 1px solid #000000;
}
.site-navigation li:hover {
background-color: #111111;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.site-navigation li:active {
background-color: #444444;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.site-navigation li.active {
background-color: #000000;
box-shadow: none;
}
.site-navigation li.active a:link, .site-navigation li.active a:visited {
color: white;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.site-navigation a {
display: block;
padding: 0.25em 6%;
}
/* ==========================================================================
Hamburgermenu bij mobiele weergave
========================================================================== */
/* checkbox voor het hamburgermenu, appearance: none werkte niet in Edge en IE11 */
/* maar het uitklapmenu gekoppeld aan checkbox werkte wel in alle browsers */
/* daarom opacity: 0 gebruikt */
#show-menu {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
width: 2rem;
height: 2rem;
outline: none;
cursor: pointer;
opacity: 0;
}
/* label op exact dezelfde plek zetten als de checkbox */
#show-menu-label {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
}
/* ::after stijl nu aan label gekoppeld ipv aan checkbox, zie comment aan begin */
#show-menu-label::after {
content: "\2630";
color: black;
font-size: 1.6rem;
padding: 0.275rem 0.45rem;
width: 2.5rem;
height: 2.5rem;
border: 1px solid #000;
border-radius: 2px;
background-color: white;
}
/* het menu heeft geen hoogte en is verborgen */
.site-navigation > div {
overflow: hidden;
height: 0;
transition: height 500ms;
}
/* na klikken op het trigram icoon (het label bovenop de checkbox)
schuift het menu naar beneden uit en krijgt zijn normale hoogte */
#show-menu:checked + div {
/* hoogte op vaste waarde gezet in plaats van auto omdat de transitie anders niet werkt */
/* 263.2 gedeeld door 16 */
height: 16.55rem;
}
/* ==========================================================================
Einde hamburgermenu bij mobiele weergave
========================================================================== */
/* ==========================================================================
Navigatie in de footer bij mobiele weergave naast elkaar laten en centreren
========================================================================== */
#center-list {
font-size:0;
}
.site-navigation.nav-footer li {
display: inline-block;
border: 0;
}
.site-navigation.nav-footer li:first-child {
border: 0;
}
[dir="rtl"] .site-navigation.nav-footer li {
float: right;
}
[dir="rtl"] .site-navigation.nav-footer li:first-child {
border-left: 0;
}
[dir="rtl"] .site-navigation.nav-footer li:last-child {
border-left: 1px solid #cccccc;
}
.site-navigation.nav-footer a {
font-size: 0.75rem;
padding: 0 1em;
}
/* ==========================================================================
Einde navigatie in de footer bij mobiele weergave naast elkaar laten
========================================================================== */
.site-navigation a:link, .site-navigation a:visited {
color: #000000;
}
.site-navigation a:hover {
color: white;
text-decoration: none;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.site-navigation a:active {
color: #dddddd;
text-decoration: none;
}
/**
* Search field in navigation.
*/
.search {
padding: 1em 6% 0.5em;
background: #ffffff;
background: rgba(255,255,255,0.5);
}
.search input[type="search"] {
width: 16em;
height: 2.125em;
padding-right: 0.1875em;
padding-left: 2em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
background-size: 2em 2em;
}
/* ==========================================================================
Language buttons
========================================================================== */
.lang-parent {
position: relative;
height: 100%;
}
.lang-buttons {
position: absolute;
padding-top: 0.5rem;
padding-right: 0.5rem;
top: 3rem;
right: 0;
}
.lang-buttons a:link, .lang-buttons a:visited {
color: black;
font-size: 0.6rem;
font-weight: 700;
border-radius: 50%;
padding: 0.25rem;
margin-right: 0.08rem;
margin-left: 0.08rem;
/* border: thin solid black; */
border-color: rgba(0,0,0,0.5);
background-color: white;
background-color: rgba(255,255,255,0.5);
}
.lang-buttons a:hover, .lang-buttons a:active {
text-decoration: none;
color: white;
/* border: thin solid white; */
background-color: black;
}
.display-none {
display: none;
}
/* ==========================================================================
End of language buttons
========================================================================== */
/* Links
========================================================================== */
/**
* 1. Specify link colour.
* 2. Remove default underline style from non-hover state links.
* 3. Interrupt the decoration line to let the shape of the text show through
* in supported browsers.
*/
a {
/* 1 */
color: #666666;
/* 2 */
text-decoration: none;
/* 3 */
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}
a:hover, a:active {
outline: 0;
color: #666666;
text-decoration: underline;
}
a:focus {
outline: 1px solid #666666;
outline: thin dotted rgba(128,128,128,0.25);
}
main a:focus {
outline: 0;
text-decoration: none;
}
/**
* Additional styling for `h1`-`h3` heading links.
*
* 1. Expanded CSS level 3 `text-decoration-color` property in supported
* browsers, older browsers ignore this addition.
*/
.site-header h1 a, .site-header h2 a, .site-header h3 a {
color: #000000;
}
.site-header h1 a:hover, .site-header h1 a:active,
.site-header h2 a:hover, .site-header h2 a:active,
.site-header h3 a:hover, .site-header h3 a:active {
color: #000000;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
h1 a,
h2 a,
h3 a {
color: #333333;
}
h1 a:hover, h1 a:active,
h2 a:hover, h2 a:active,
h3 a:hover, h3 a:active {
color: #333333;
/* 1 */
-webkit-text-decoration-color: rgba(51, 51, 51, 0.5);
text-decoration-color: rgba(51, 51, 51, 0.5);
}
/**
* Paginator (prev/next) navigation links on articles/article lists.
*
* Example HTML:
*
*