@font-face {
  font-family: 'helveticaneue-light-webfont';
  src: url('/fonts/helveticaneue-light-webfont.eot'); /* IE9 Compat Modes */
  src: url('/fonts/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/helveticaneue-light-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/fonts/helveticaneue-light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/helveticaneue-light-webfont.svg#HelveticaNeueRegular') format('svg'); /* Legacy iOS */
}

html, body {padding: 0; margin: 0; height: 100%; font-size: 14px;}

body {overflow-y: scroll; font-size: 1rem; line-height: 1.29em; color: rgba(0,0,0,0.4); font-family: 'helveticaneue-light-webfont', sans-serif;}
body.landing {color: white; background: #1C3F94; overflow-y: hidden;}

.container {width: 94.5em; padding: 0 1em; margin-bottom: 10em;}

.h1 {font-size: 1rem; margin: 3.5em 1.1em 6.5em 1em;}
.h1 img {width: 27.18em;}

h1 {font-size: 1.43rem!important; margin: 0.1em 0 1em; padding: 0;}
h2 {font-size: 1.22em; line-height: 1.29em; margin: 2.5rem 0 0.7rem; opacity: 0.5;}
p, ol, ul {margin-bottom: 1.29em;}
ul {padding-left: 0.85em;}
ol {padding-left: 25px;}
.slide {width: 100vw; height: 100vh; background: #1C3F94; position: absolute; z-index: 1;}
.slide.active {display: block;}
.innerslide {color: white; width: 80vw; height: 100vh; max-width: 1400px; margin: 0 auto; background: url('/img/logo_white.svg') center 45% no-repeat; background-size: contain;}
.loaded .innerslide {background: url('/img/logo_white.png') center 45% no-repeat; background-size: contain;}
.slide .title {text-align: center; font-size: 21px; line-height: 1.29em; position: fixed; left: 20px; bottom: 15px; width: calc(100% - 40px);}

.grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0;}
a.griditem {display: block; color: rgba(0,0,0,0.8); padding: 1em; text-decoration: none!important; position: relative; font-size: 1.07rem;}
a.griditem .image {font-size: 1rem; width: 100%; aspect-ratio: 1.3; background: #eee; position: relative; display: flex; flex-direction: column; justify-content: center;}
a.griditem .image > div {text-align: center; color: white; opacity: 0; font-size: 1.07rem; padding: 0 0.7rem; position: relative; z-index: 2;}
a.griditem:hover .image > div, a.griditem.loadmore .image > div {opacity: 1;}
a.griditem:not(.loadmore):hover .image::before {
    content: "";
    background: rgba(0, 30, 105, 0.7);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}


a.griditem.loadmore {cursor: pointer;}
a.griditem.loadmore .image {background: #1C3F94;}
a.griditem.noreadmore:hover .image {filter: grayscale(1);}
a.griditem.noreadmore:hover .image > div {color: rgba(0,0,0,0.8)}
a.griditem.noreadmore:hover .image::before {background: rgba(255,255,255,0.8);}
a.griditem.noreadmore:hover {cursor: inherit;}

a:focus {text-decoration: none;}

body.posts a.griditem {padding-bottom: 2em;}
body.posts a.griditem .image {margin-bottom: 1em;}
body.posts a.griditem:not(.noreadmore,.loadmore):hover {color: white; background: #1C3F94;}
body.posts a.griditem:not(.loadmore):hover .image::before {content: none;}
body.posts a.griditem.noreadmore:hover .image {filter: grayscale(0);}
body.posts a.griditem:hover {color: rgba(0,0,0,0.8);}

body.people .grid {grid-template-columns: 1fr 1fr 1fr;}
body.people a.griditem .image > div:not(.hover_image) {position: absolute; top: auto; bottom: 0; transform: none; width: 100%; padding: 0 1rem 1.75rem 1rem;}
body.people a.griditem .image > div.hover_image {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; transform: none;}
body.people a.griditem.noreadmore:hover .image {background: rgba(0,0,0,0)!important;}
body.people a.griditem.noreadmore:hover .image::before {background: rgba(255,255,255,0.8);}
body.people a.griditem .image.noimage, body.people a.griditem:hover .image.noimage {background: none!important;}

.navigation {overflow: hidden; position: relative;}
.navigation > * {float: left;}
.navigation ul {width: 9em; margin-top: 3.17em; font-size: 1.22em;}
.navigation ul.social {position: absolute; right: 1em; text-align: right;}
.navigation ul.social li {display: inline-block;}
.navigation ul.social li img {height: 1.28rem; margin-left: 0.2rem; opacity: 0.2;}
.navigation li {list-style: none;}
.navigation li a {color: rgba(0,0,0,0.4);}
.navigation li a:hover, .navigation li.active a, .navigation li a.active {text-decoration: none; color: #1C3F94;}
.navigation a {display: block;}

.textfullwidth {margin: 1em; color: rgba(0,0,0,0.8);}
.texthalfwidth {margin: 1em; color: rgba(0,0,0,0.8); width: 44.2em; float: left;}
.texthalfwidth > * {padding-right: 5em;}
.imagehalfwidth {margin: 1em; background: rgba(0,0,0,0.05); width: 44.2em; min-height: 31.25em; float: left;}

.textcolumn {margin: 1em; width: 21em; float: left; color: rgba(0,0,0,0.8); padding-right: 1rem;}
.textcolumn > * {font-size: 1.07rem;}
.imagecolumn {margin: 0; width: 69.47em; float: left; overflow: auto;}
.imagecolumn > * {position: relative; margin: 1em; overflow: hidden;}
.imagecolumn > * .caption {position: absolute; bottom: 5px; text-align: center; display: block; width: 100%; text-align: center; color: white;}
.imagecolumn .portraitdiv {float: left; height: 50em; width: calc(50% - 2rem); background: rgba(0,0,0,0.05);}
.imagecolumn .largediv {float: left; height: 50em; width: calc(100% - 2rem); background: rgba(0,0,0,0.05);}
.imagecolumn .smalldiv {float: left; height: 24em; width: calc(50% - 2rem); background: rgba(0,0,0,0.05);}
.imagecolumn > .texthalfwidth {max-width: 38.5rem;}
.imagecolumn .largediv iframe {background: #eee; position: absolute; height: 100%; width: 100%; left: 50%; transform: translateX(-50%); opacity: 0;}

.fillvideo {position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: none; height: 100%; width: 100%;}

b, strong {font-weight: normal; opacity: 0.5;}
a {font-weight: normal;}
a, a:hover, a:focus {color: #1C3F94;}

.texthalfwidth a, .textfullwidth a, .textcolumn a {color: rgba(0,0,0,0.8); text-decoration: underline; text-decoration-color: rgba(0,0,0,0.3);}
.texthalfwidth a:hover, .textfullwidth a:hover, .textcolumn a:hover {color: rgb(28, 63, 148); text-decoration-color: rgba(28, 63, 148, 0.5);}

a[href^="mailto"],
a[href="https://www.springtijarchitecten.nl"] {text-decoration: none;}

.playbutton {width: 7em; position: absolute; left: 50%; top: 50%; 
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
    transform: translate(-50%, -50%);
    z-index: 9;
}
.mapholder {padding-top: 2rem; clear: both;}

form {columns: 2; margin-top: -1rem!important;}
form > div.tworows {margin-bottom: 0; padding: 0;}
form > div.tworows > div:nth-child(1) {width: 150%;}
form > div.tworows > div,
form > div {display: flex; flex-direction: row; margin-bottom: 0.5rem; color: rgba(0,0,0,0.8); align-items: center; padding: 0.25rem 0; width: 100%;}
form > div label {font-weight: 300; margin: 0; white-space: nowrap;}
form > div > span:first-child {padding-right: 1rem;}
form > div > label:first-child, form > div.tworows label:first-child {min-width: 9rem; width: 9rem;}
form > div.tworows > div:nth-child(2) label {padding-left: 2rem;}
form > div input:not([type="checkbox"],[type="radio"]), form > div textarea {background: rgba(0,0,0,0.05); border: 0; border-radius: 0; flex-grow: 1; font-family: 'helveticaneue-light-webfont'; font-size: 1rem; padding: 0.25rem 0.25rem; margin: -0.25rem 0; max-width: calc(100% - 9rem); width: 100%;}
form > div textarea {min-height: 24.65rem;}
form > div.radiodiv > div {display: flex;}
form > div input[type="submit"] {color: white; background: #1C3F94; padding-left: 2rem; padding-right: 2rem; width: auto; max-width: 100%;}


@media screen and (max-width: 1400px) {
    html {font-size: 1vw;}
}

/* 1 koloms layout */
@media screen and (max-width: 600px) {
    html {font-size: 14px;}
    .grid {grid-template-columns: 1fr!important;}
    .h1 {margin: 3.5em 1.1em 2em 1em;}
    .navigation {margin-bottom: 1.75rem;}
    .navigation ul {overflow: visible; margin: 0em; width: calc(100% - 1rem);}
    .navigation ul.menu:nth-child(3) {display: flex; justify-content: space-between;}
    .navigation ul.menu:nth-child(3),
    .navigation ul.menu:nth-child(4) {margin-bottom: 1.1em;}
    .navigation ul.menu:last-child {margin-bottom: 1.7em;}
    .navigation li {display: inline-block; margin-right: 0.83em;}
    .navigation li:last-child {margin-right: 0;}
    .h1 img {width: 100%;}
    .navigation > * {float: none;}
    .container {padding: 0; width: 24.5rem; margin-bottom: 8rem;}
    .imagecolumn {width: 100%;}
    .imagecolumn > * {margin: 1em 1em 0;}
    .imagecolumn .largediv, .imagecolumn > div,
    .textcolumn, .texthalfwidth, .imagehalfwidth {width: calc(100% - 2rem)!important;}
    .imagehalfwidth {min-height: 0em;}
    .texthalfwidth > * {padding-right: 0em;}
    .imagecolumn .largediv, .imagecolumn .smalldiv {padding-bottom: 68%; height: auto;}
    .imagecolumn .smalldiv,
    .imagecolumn .portraitdiv {padding-bottom: 64%; height: auto; width: calc(50% - 1.5rem)!important; margin-right: 0;}
    .imagecolumn .smalldiv {padding-bottom: 31%;}
    .imagecolumn .smalldiv + .smalldiv {margin: 1em 1em 0 1em;}
    .textcolumn {padding-right: 0;}
    .mapholder {display: none;}
    form {columns: 1;}
    form > div.radiodiv {flex-direction: column; align-items: flex-start; margin-top: 1rem;}
    form > div.radiodiv > div {margin: 0.25rem 0;}
    form > div.tworows {display: flex; flex-direction: column; align-items: flex-start;}
    form > div.tworows > div:nth-child(1) {width: 100%;}
    form > div.tworows > div:nth-child(2) label {padding-left: 0;}
}