/*
Theme Name: KoalaKoncepts
Theme URI: http://koalakoncepts.nl/
Author: ongezoet
Author URI: http://ongezoet.com/
Description: Theme for website KoalaKoncepts
Version: 1.0
Tags: koalakoncepts, ongezoet
Text Domain: koalakoncepts.nl
*/

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

* {-webkit-font-smoothing: antialiased;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: solid 1px #85C572; border-radius: 0px; background-color: #222222; color: #fff; font-family: 'Fjalla One', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 15px 10px 15px; background: url(img/dropdown.png) 93% /8% no-repeat;}
html, body {height: 100%; min-height: 100%;}
body{background: #222222; width: 100%; position: relative;}
ol, ul, li {list-style: none;}
.main-wrapper {height: 100%; min-height: 100%;}
.logo-small {width: 20px!important;}

/* --------- LOGO ---------- */
.wrapper-header-logo {width: 70%; height: 300px; margin: 0 auto; padding-left: 20%;}
.wrapper-header-logo img {padding-right: 30px; width: 20%; float: left;}
.logo {width: 80%; height: auto; position: relative; display: inline-block;}
.logo-navigation {display: inline-block;}
.logo-wrapper img {position: relative; width: 94px;}
.logo-wrapper {position: fixed; z-index: 9; top: 20px; left: 20px; transition: opacity, 0.1s, linear; }
.logo-text {font-size: 18px; font-weight: normal; color: #222222; display: inline-block; padding-left: 20px;}
.footer-logo {position: relative; width: 30px; height: auto; z-index: 99; margin-right: 1rem; margin-top: -11px;}
/* ------------- HELP CLASSES ------------*/
.table {display: table; margin-bottom: 0px;}
.table-inner {display: table-cell; vertical-align: middle;}
.no-padding {padding: 0px;}
.no-margin {margin: 0px;}
.skew {transform: skew(0deg, -3deg) ; -webkit-transform: skew(0deg, -3deg) ; -moz-transform: skew(0deg, -3deg) ; -o-transform: skew(0deg, -3deg) ; -ms-transform: skew(0deg, -3deg);}
.skew-container {background-color: #222; width: 100%; height: 80px;}
.skew-row {margin-top:-35px;}
.negative-margin {margin-top: -120px;}
.float-right {float: right;}
.text-align-left {text-align: left;}
.inline-block {display: inline-block;}
.align-vertical {position: relative; top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); height: auto;}
.display {display:block;}
.hidden {display: hidden;}
.overflow-hidden {overflow: hidden;}
.fixed {position: fixed!important;}


/* ----------- Heading --------- */
h1, h2, h3, h4, h5, h6, h7, h8, ul, li, .button-style, .button-style-icon, .footer-text {text-transform: uppercase;}
h1 {font-family: 'Fjalla One', sans-serif; font-size: 64px; letter-spacing: 0.05em; font-weight: normal; margin-bottom: 0px;}
h2, .project-titel {font-family: 'Fjalla One', sans-serif; font-size: 38px; letter-spacing: 0.05em; font-weight: normal;}
h3, .label-titel {font-family: 'Fjalla One', sans-serif; font-size: 38px; color: #85C572; letter-spacing: 0.05em; font-weight: normal;}
h4 {font-family: 'Fjalla One', sans-serif; font-size: 18px; color: #d4d4d4; letter-spacing: 0.05em; font-weight: normal;}
h5, .credit-titel {padding-top: 20px; padding-bottom: 5px; font-size: 16px; color: #666666; font-weight: normal;}
.label-titel-home { font-size: 18px; margin-top: 10px;}
.label-icon-home img{ height: 13px; margin-right: 10px;  display: inline-block;}
p {line-height: 1.8em; font-size: 20px;}
.project-titel-home {color: #fff;}
.content-wrapper {background: none;}
.project-titel { color:#fff; }
ul.filterlist li.filter-title {color:#666;}
.green-text {color: #85C572;}



/*  -------- LINKS ----- */
a {color: #fff;}
a:active, a:hover, a:focus, a.active {text-decoration: none; color: #85C572;}
a.contact-info {font-family: 'Fjalla One', sans-serif; letter-spacing: 0.05em; font-weight: normal; text-transform: uppercase;}

#map {margin-bottom: -10px; background-color: #222;}



.special-thanks {color: #85C572; padding: 50px;}
.center-text {padding-top: 40px;}

.detailpage-categories br{ display: none; }
.detailpage-categories h2,
.label-video-share {color: #fff; font-size: 24px; padding: 5px 30px 2px 5px;}
.detailpage-categories,
.label-video-share{ border-right: solid 2px #85C572; }

.label-video-share {padding-left: 30px; border: none; font-size: 24px; letter-spacing: 0.05em;}
.label-content {padding: 30px 0 80px 0; }
.button-title {font-family: 'Fjalla One', sans-serif; font-size: 38px; letter-spacing: 0.05em; font-weight: normal; color: #fff; margin: 0px; padding: 0px;}

/* ------- BUTTONS ----------*/
.button-style-icon {width: auto; padding: 14px 38px 11px 16px; margin-top: 40px; background-color: #222222; border: 2px solid #85C572; font-family: 'Fjalla One', sans-serif; font-weight: normal; font-size: 18px; letter-spacing: 0.05em; color: #85C572; display: inline-block;}
.button-field {height: 800px; width: 100%; margin: 0;}
.button-style {width: auto; padding: 14px 20px 11px 20px; margin-top: 30px; background-color: #222222; border: 2px solid #85C572; font-family: 'Fjalla One', sans-serif; font-weight: normal; font-size: 18px; letter-spacing: 0.05em; color: #85C572; display: inline-block;}
.footer {width: 100%; padding: 2rem; background-color: #000000;}
.sub-footer {padding: 0rem 1rem 1.5rem 1rem; background: black;}
.footer-text {padding-left: 15px; font-family: 'Fjalla One', sans-serif; font-size: 12px; color: #fff; letter-spacing: 0.05em; font-weight: normal; display: inline-block;}
.footer-2 {width: 100%; background-color: #000000; padding: 18px;}
.text-sm {font-size: 12px;}

/* ------ ANIMATIONS --------*/
.transition {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
.opacity {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 0.0;}

/*----------- NAVIGATION---------- */
.navigation-wrapper { position:relative; opacity: 1; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.hide {transition: all 0.2s; display: none;}
.c-hamburger {display: block; overflow: hidden; margin: 0; padding: 0; width: 70px; height: 96px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; z-index: 99999;}
.c-hamburger:focus {outline: none;}
.c-hamburger span {display: block; position: absolute; top: 30px; left: 18px; right: 18px; height: 4px; background: #85C572;}
.c-hamburger span::before,
.c-hamburger span::after {position: absolute; display: block; right: 0; width: 100%; height: 4px; background-color: #85C572; content: "";}
.c-hamburger span::before {top: -10px;}
.c-hamburger span::after {bottom: -10px;}
.c-hamburger--rot {background-color: rgba(0,0,0,0);}
.c-hamburger--rot span {transition: transform 0.3s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}

/* active state, i.e. menu open */
.c-hamburger--rot.is-active {background-color: rgba(0,0,0,0);}
.c-hamburger--rot.is-active span {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.hamburger-wrapper {position: absolute; width: 70px; height: 96px; z-index: 99999; top: 18px; right: 0px;}
#navigatie {width: 100%; height: 100%; z-index: 999; display: none; position: fixed;}
#navigatie.full {display: block;}
.navigation {width: 100%; height: 100vh; background-color: rgba(0,0,0,0.9);}
h2.contact-info, a.contact-info {color: #fff; padding: 20px 0px 0px 10px; font-size: 18px; margin-top: 10px;}
ul.nav-list li {padding-bottom: 30px;}
ul li {font-family: 'Fjalla One', sans-serif; font-size: 55px; color: #fff; letter-spacing: 0.05em; line-height: 1.5em;}

.language-box{padding: 5px; border: solid 2px #444; text-align: center; color: #85C572; display:inline-block; font-family: 'Fjalla One', sans-serif; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: -6px;}
.language-box:hover, a.language-box:active, .language-box-active {background-color: #444;}
.language-box-position {position: absolute; top: 32px; right: 70px; z-index: 9999;}

/* ------ ICONS -------- */
.fa {color: #85C572;}
.fa:hover {color: #fff;}
.fa-long-arrow-left {color: #255625; opacity: 0.3; padding-left: 20px; position: absolute;}
.fa-rocket {padding-left: 10px;}
.fa-mobile {font-size: 1.8em; color: #85C572; margin-right: 12px; }
.fa-heart {color: #85C572; padding-right: 5px; display: inline-block; font-size: 1.2em;}
i.fa-envelope {color: #85C572; padding: 0 10px 0 0;}
i.fa-envelope:hover {color: #7AAF69;}
.fa-facebook, .fa-twitter { padding: 0 10px; color: #85C572;}
.fa-vimeo {padding-right: 15px; color: #85C572;}
.fa-vimeo:hover, .fa-facebook:hover, .fa-twitter:hover {color: #d4d4d4;}
.leaf-img {max-width: 200px; float: left; margin-top: 15%; position: absolute;}
.position-icon-mobile {top: 101px; right: 110px; position: relative;}
.position-icon-mail { position: relative; margin-right: 16px; }
.label-icon  {width: auto; display: inline-block; padding-left: 42px; padding-top: 15px;}
.label-icon-home {padding-top: 0px;}
.label-icon img {height: 18px; position: relative;}
span.label-video img {height: 25px; padding-right: 10px; padding-bottom: 10px;}
.label-icon-home font {margin-right: 20px;}
.header-icon-envelop {font-size: 1.4em; padding-right: 10px;}
.sub-footer i.fa {font-size: 22px;}

/* --------- VIDEO ------------ */
.video-size {margin: 0 auto; width: 100%;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.overlay-header-video {width: 100%; height: 80vh; min-height: 600px; z-index: 0; position: relative; background-color: rgba(255,255,255,0.5);}
.header-video {width: 100%; height: 100%; /*margin: 0;*/ position: absolute;}


/*.video-size {margin: 0 auto; width: 100%;}
.video-size-full {margin: 0 auto; height: 100%;}
.videoWrapper {position: relative; padding-bottom: 56.25%;  16:9  padding-top: 25px; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.overlay-header-video {width: 100%; height: 80vh; min-height: 600px; z-index: 0; position: relative; background-color: rgba(255,255,255,0.5);}
.header-video {width: 100%; height: 100%; margin: 0; position: absolute;}*/



/*---------- MIJN WERK ---------- */
.header-title {margin: 0px;}
.project-bg {width: 100%; height: 300px; border-top: solid 1px #323232; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.project-text {padding-bottom: 40px; width: 100%; min-height: 300px; border-top: solid 1px #323232; transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.project-select .row {transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.project-text h1 {margin-top: 0px; padding-top: 40px;}
.project-text { padding: 30px; }
.project-text h2 {font-size: 28px; padding: 0; margin-top: 10px;}
.label-content {margin-bottom: 40px;}
.label-icon {padding: 0;}
.label-icon img { margin-right: 10px; }
.label-titel {padding: 0; margin: 10px 0px 20px 0px; font-size: 18px;}
.project-text p {padding: 0; line-height: 1.8em; font-size: 16px; color: #d4d4d4;}
a.project-select:hover .row , .project-text:hover{background-color: #323232; border-color: #222222;}

.label-icon {padding-left: 0px;}
.label-icon img {height: 13px; }
.selectbox {display: none;}
.selectbox option{color: #FFF;  background-color: #333;}
.select-title {padding-right: 20px; color: #fff; display: inline-block;}

/* ----------- FILTER -----------*/
.filter-field{width: 100%; padding-right: 30px; position: relative; z-index: 1; padding-top: 30px; padding-bottom: 30px; }
ul.filterlist li {font-size: 14px; color: #fff; display: inline-block; padding-left: 30px; }

/* ----------- HOME -----------*/
.position-text {padding-left: 50px;  padding-right: 50px;}
.homepage-project {width: 100%; height: 300px; margin: 0; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.project-content {z-index: 1; background-color: rgba(34,34,34,1);}
.header-content img {width: 20%; padding-right: 25px; display: inline-block;}
.header-content h2 {font-size: 28px; margin-top: 5px; padding-left: 3px;}
.project-titel-home {font-size: 45px; letter-spacing: 0.05em; color: #fff;}
.label-icon-home {padding-left: 0px;}
.button-field {height: 300px;}
.position-content {text-align: left; position:relative; top: 50px;}

.logo-animation img { width: 100%; }

/* --------- PROJECTPAGE -------- */
.video-size {width: 100%; }
.header-img-overlay p {padding-top: 20px;}

.wide-button {height: 80px; background-color: #85C572; transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.wide-button:hover {background-color: #7AAF69;}
.wide-button:hover .wide-button-titel { color:#fff; }
.wide-button-titel {font-family: 'Fjalla One', sans-serif; font-size: 18px; letter-spacing: 0.05em; color: #fff;}
.header-img {width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 1.0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: opacity 0.3s ease-in-out;}
.header-img-404 {height: 100%;}
.header-img-overlay {width: 100%; height: 100%; padding: 80px 0px 40px 0px; background-color: rgba(255,255,255,0.6); position: relative;}
.next-project {width: 100%; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.project-overlay {width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);  /*Standard*/ transition: all 0.2s;  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out}
.project-overlay:hover { background-color: rgba(0,0,0,0); }
ul.filterlist { margin-bottom: 0px; }

video#bgvid {
    /*position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);*/

    position: fixed;
    top: 0;
    left: 50%;

    min-width: 100%;
    width: auto;
    z-index: -100;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.dark-background { background-color: rgba(34,34,34,1); margin-top: -100px; padding-top: 60px; }

.ongezoet img { width: 26px; height: 24px;}

.title-404 { color: #333; }
.link-404 { color: #85C572; }
.link-404 a { color: #85C572; }
.link-404 a:hover, .link-404 a:focus, .link-404 a:active { color: #fff; }



/* Credits section on detail page, this takes care of the (ACF) wysiwyg content */
.credits-content{ padding-bottom: 80px; }
.credits-content h1,
.credits-content h2,
.credits-content h3,
.credits-content h4,
.credits-content h5{
    padding-top: 20px;
    padding-bottom: 5px;
    font-size: 16px;
    color: #666666;
    font-weight: normal;
}
.credits-content a{
    color: #85C572;
}
.credits-content p{
    line-height: 1.5em;
    font-size: 16px;
    color: #FFF;
}
/*.credits-field {padding-bottom: 80px; }
.credit-text {font-size: 16px; color: #fff; line-height: 1.5em;}*/

/* ------------ Language selector ------------- */
.skew #lang_sel { margin-bottom: 60px; transform: skew(0deg, 3deg) ; -webkit-transform: skew(0deg, 3deg) ; -moz-transform: skew(0deg, 3deg) ; -o-transform: skew(0deg, 3deg) ; -ms-transform: skew(0deg, 3deg); }


/* ------------ NOISE ------------- */
.tvNoise:hover, .tvNoise-nav { transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; }
.tvNoise:hover div.project-overlay, .tvNoise-nav { background-image: url(img/noise-light.png); background-repeat: repeat; background-position: 0 0; -webkit-animation: noiseAnim 0.5s infinite linear alternate; -moz-animation: noiseAnim 0.5s infinite linear alternate; -o-animation: noiseAnim 0.5s infinite linear alternate; animation: noiseAnim 0.5s infinite linear alternate; }
a.tvNoise:hover, .tvNoise-nav { transition: all 0.2s; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; background-image: url(img/noise-light.png); background-repeat: repeat; background-position: 0 0; -webkit-animation: noiseAnim 0.5s infinite linear alternate; -moz-animation: noiseAnim 0.5s infinite linear alternate; -o-animation: noiseAnim 0.5s infinite linear alternate; animation: noiseAnim 0.5s infinite linear alternate; }
@-webkit-keyframes noiseAnim{
    0%   { background-position: 10px 200px; }
    20%  { background-position: -50px 0; }
    40%  { background-position: 100px -10px; }
    60%  { background-position: 0 -150px; }
    80%  { background-position: -100px -30px; }
    100% { background-position: 160px -60px; }
}
@-moz-keyframes noiseAnim {
    0%   { background-position: 10px 200px; }
    20%  { background-position: -50px 0; }
    40%  { background-position: 100px -10px; }
    60%  { background-position: 0 -150px; }
    80%  { background-position: -100px -30px; }
    100% { background-position: 160px -60px; }
}
@-o-keyframes noiseAnim {
    0%   { background-position: 10px 200px; }
    20%  { background-position: -50px 0; }
    40%  { background-position: 100px -10px; }
    60%  { background-position: 0 -150px; }
    80%  { background-position: -100px -30px; }
    100% { background-position: 160px -60px; }
}
@keyframes noiseAnim {
    0%   { background-position: 10px 200px; }
    20%  { background-position: -50px 0; }
    40%  { background-position: 100px -10px; }
    60%  { background-position: 0 -150px; }
    80%  { background-position: -100px -30px; }
    100% { background-position: 160px -60px; }
}



/* ------------ MEDIA QUERIES ------------- */

@media (min-width:1439px) {
    h1 {font-size: 85px;}
    h2 {font-size: 48px;}
    .position-content {top: 65px;}
    /* .header-content img {width: 20%; padding-right: 40px;} */
    p {font-size: 20px; line-height: 1.8em;}
    .project-text { padding: 30px; }
    .project-text h2 {font-size: 48px; padding: 0;}
    .label-content {margin-bottom: 60px;}
    .label-icon {padding: 0;}
    .label-icon img { margin-right: 10px; }
    .label-titel {padding: 0; margin: 10px 0 20px 0; }
    .project-text p {padding: 0;}
    .video-size {width: 100%; margin-top: -50px;}
    #bgvid {height: 90%;}
    .homepage-project { height: 450px; transition: all 0.1s; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; }
    .homepage-project:hover { height: 450px; }
    .footer {}
    .project-bg, .project-text {height: 450px;}
    .credits-field { margin-top: -60px; }
    .next-project {height: 450px;}
    .hamburger-wrapper {right: 0;}
    .project-titel-home, .project-titel {font-size: 64px;}
    .button-title {font-size: 48px;}
    .button-field {height: 350px;}
    h5.project-titel { }
    .skew-container {height: 100px;}
    .skew-row {margin-top:-50px;}
    .filter-field {margin-top: -46px;}
    .filterlist { padding-top: 45px; }
    .float-right {float: right;}
}

@media (max-width:1240px) {
    .float-right {float: none;}
    .footer {text-align: center;}
    .footer-2 {text-align: center;}
    .ongezoet img, .fa-vimeo  {display: none;}

}

@media (max-width:1024px) {
    /* .logo-wrapper {display: none;} */
    .logo-wrapper .logo-text { display: none; }
    .project-text h2 { }
    .header-content img {width: 40%;}
    .header-content h2 {font-size: 28px;}
    .position-content {text-align: center; top:30px;}



}

@media (max-width:991px) {
    .position-content {text-align: center; }
    .header-content h1 {padding-top: 30px; font-size: 70px;}
    .header-content h2 {font-size: 30px;}
    .header-content img {width: 30%;}
    .project-text { min-height: 0; height: auto; }
    p {font-size: 18px;}

    .header-img-overlay { padding: 80px 0px 40px 0px; }
    .height-auto { height: auto !important; }
    .align-vertical {position: relative; top: auto; transform: none; -webkit-transform:none; -ms-transform:none; height: auto;}
    .header-video { height: 700px; background-size: cover; background-position: center center; }
    .project-titel-home, .label-titel-home {padding-left: 30px; padding-right: 30px;}
    .filter-field {padding: 20px; margin: 0px; float: none; text-align: center;}
    .float-right {float:none;}
    .footer-text {padding-left:10px;}
    video#bgvid {display: none;}
}

@media (max-width:767px) {
    ul.nav-list li {padding-bottom: 10px;}
    ul.filterlist li {font-size: 10px}
    .float-right {float: none;}
    .hamburger-wrapper {top: 3px;}
    h1 {font-size: 40px;}
    p {line-height: 1.8em; font-size: 16px;}
    /* .logo-wrapper {display: none;} */
    .logo-wrapper { top: 10px; left: 10px; }
    .logo-wrapper .logo-text { display: none; }
    .logo-wrapper img { width: 64px; }
    ul.filterlist {display: none;}
    .filter-field {padding-bottom: 20px; padding-right: 20px; padding-top: 40px; }
    .navigation ul li {font-size: 36px;line-height: 1.5em;}
    .contact-info {padding: 30px 0px 30px 0px;}
    ul.contact-info li {line-height: 1.5em;font-size: 16px;}
    .overlay-header-video { height: 490px; min-height: 490px; }
    .header-video { height: 400px;  background-size: cover; background-position: center center; }


    .header-content h1 {font-size: 40px; padding-top: 0px;}
    .header-content h2 {font-size: 18px}
    .homepage-project {height: 200px;}
    .project-titel-home, .label-icon-home, .label-titel-home  {padding-left: 0px; padding-right: 0px;}
    .project-text { padding: 20px; }
    .content-wrapper {padding: 0px 25px 0px 25px;}
    .selectbox {width: auto; font-size: 12px; padding: 10px;  display: block; margin-top: -30px;}
    .selectbox h2 {font-size: 12px;}
    .project-bg {height: 200px;}
    .project-titel-home, .button-title, .project-text h2 {font-size:28px;}
    .fa-vimeo {margin: 0px;}
    .label-content { margin-bottom: 0px;}
    .detailpage-categories{ width: 100%; border-right: none; }
    .detailpage-categories h2, .label-video-share {font-size: 16px; padding-right: 15px;}
    .label-video-share {padding-left: 13px;}
    .fa-facebook, .fa-twitter {font-size: 1.5em;}
    .fa-twitter {padding-right: 0px;}
    .fa-long-arrow-left {display: none;}
    span.label-video img {height: 12px; padding-right: 0px; padding-bottom: 0px; margin-bottom: 6px;}
    .special-thanks {padding: 30px 0px 30px 0px;}
    .credits-field {padding: 0px 0px 50px 0px;}
    .credits-content p.credit-text:last-child {padding-bottom: 40px;}
    .position-text {padding: 25px;}
    h5.project-titel {font-size: 28px;}
    .next-project { height: 200px; }
    h7.wide-button-titel {font-size:18px;}
    #bgvid { display: none; }
    .footer { }
    h2.contact-info { padding-top: 0; font-size: 15px; }
    .skew #lang_sel {margin-bottom: 30px;}
    .footer {text-align: center;}
    .footer-2 {text-align: center;}
    .footer-text-mobile {display:none;}
    .footer-overlay {padding-top: 13px; text-align: center;}
    .footer-text-position {float: none; margin-left: 0px;}
    .divider{display:none;}
    .ongezoet {display:none}
    .language-box-position {top: 18px;}
    .vimeo-footer {display: none;}
    video#bgvid {display: none;}
    #map iframe { height: 220px; }
    .button-field {height: 220px;}
    .button-field .button-style-icon { margin-top: 20px; }
}

@media (max-width:567px) {
    .header-content {text-align: center;}
    .header-content img {float: none; width: 50%; margin-top: 50px;}
    .position-content {text-align: center; top:0;}
}