html {
font-size:16px
}
body {
margin:0;
font-family: 'Open Sans', sans-serif;
background: white;
}
.grecaptcha-badge {
display: none;
}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.screen-reader-text {
clip:rect(1px,1px,1px,1px);
position:absolute!important
}
:focus {
outline:0
}
a.post-edit-link {
display:none
}
textarea, input[type="submit"] {
-webkit-appearance:none;
}
ul {
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
clear: both;
line-height: 1.3;
}
h1,h2,h3 {
font-size: 1.5rem;
}
h1 {
margin-top: 0;
margin-bottom: 1em;
}
h2 {
margin-top: 0;
}
h3 {
margin-top: 0;
}
b,strong {
font-weight: 700;
}
p, li, a {
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.error404 .page-title {
font-size:1.8rem
}
#inner-header {
margin: 0em auto;
}
.home-link {
position: absolute;
left: 38.095%;
top: 41.667%;
width: 45%;
z-index: 100;
width: 315.498px;
height: 290px;
position: absolute;
left: 0!important;
right: 0!important;
top: calc(50% - 150px)!important;
margin: 0 auto;
}
.page-id-2::before, .page-id-36 .slider::before, body:not(.home) .slider::before, body.page-id-419 .slider::before, body.page-id-422 .slider::before, .error404 .slider::before, body.page-id-23 .slider::before, body.page-id-20 .slider::before, .single-post .slider::before, body.page-id-36 .slider::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(270deg, rgba(61, 61, 61, 0.00) 0%, rgba(51, 51, 51, 0.50) 53.13%, rgba(47, 47, 47, 0.00) 100%);
z-index: 2;
}
.home-link img {
transition: .2s ease-in-out;
width: 100%;
height: 100%;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: none;
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
padding-right: 2px; width: 270px;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
section:after,.inner:after,.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.slider {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
z-index: -1;
background: url(https://www.joanneschilder.com/wp-content/uploads/2023/12/joanne-tekst-bg.jpg) no-repeat;
background-size: cover;
background-position: center bottom;
transition: .5s ease-in-out;
opacity: 1;
}
.slider.active {
background-size: cover;
background-position: center center;
transition: .5s ease-in-out;
opacity: .1;
}
.slider.active .grid {
display: none;
transition: .3s ease-in-out;
}
.grid {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 10;
content: ''; }
.owl-carousel .owl-item img {
opacity: 1;
transition: .1s ease-in-out;
}
.owl-carousel .owl-item img.active {
opacity: .3;
transition: .1s ease-in-out;
}
.HeaderSlider .owl-stage-outer, .HeaderSlider .owl-stage-outer .owl-stage, .HeaderSlider .owl-stage-outer .owl-item, .HeaderSlider .owl-stage-outer .owl-item div {
height: 100%;
width: 100%;
}
.HeaderSlider .owl-stage-outer .owl-item div {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
} section.sub.projecten {
margin-top: 0!important;
padding: 0% 5%;
background: #EDE8E1!important;
padding-top: 200px!important;
}
body:not(.home):not(.page-id-20) .home-link, body.page-id-419 .home-link, body.page-id-422 .home-link, .error404 .home-link, body.page-id-23 .home-link, .single-post .home-link, body.page-id-36 .home-link {
left: 0;
right: 0;
margin: 0 auto;
top: 10%;
width: 375px;
transition: .4s ease-in-out;
z-index: 10;
top: calc(25% - 150px) !important;
width: 120px!important;
}
.page-id-20 .home-link{
height: 140px!important;
width: 100px!important;
top: 60px!important;
}
div#main > .cta-knoppen a {
background: #FF5722;
color: white;
text-decoration: none;
padding: 10px 20px;
display: table;
text-transform: uppercase;
font-weight: 800;
border-radius: 4px;
background: #A58A62;
color: #FFF;
text-align: center;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
div#main > .cta-knoppen a:hover {
background: #8d785a;
}
.page-id-20 div#main > .cta-knoppen a {
margin: 0 auto;
}
.page-id-20 div#main > .cta-knoppen {
top: 645px;
z-index: 3;
}
div#main > .cta-knoppen {
position: absolute;
top: -54px;
margin: 0 auto;
max-width: 900px;
display: block;
width: 100%;
left: 0;
right: 0;
}
div#main {
position: relative;
}
.maps {
height: 100%;
z-index: 5;
position: absolute;
right: 0;
top: 0;
width: 30%;
background: url(https://www.joanneschilder.com/wp-content/uploads/2018/03/Kaart.jpg) no-repeat;
color: white;
overflow: hidden;
background-size: cover;
background-position: center center;
max-height: 350px;
}
body.page-id-23 .maps {
width: 100%;
max-height: initial;
background: initial;
}
body.page-id-23 .slider  {
background: #2b2b2b;
}
body.page-id-20 .slider{
background: white;
}
.page-id-23 .slider.active {
opacity: initial;
}
.single-post .slider {
background: white;
}
section.sub {
margin-top: 50vh;
}
.maps p {
background: #1d1d1b;
padding: 20px;
text-transform: uppercase;
font-size: 13px;
text-align: center;
}
.maps a {
background: #1d1d1b;
color: white;
text-decoration: none;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
width: 75%;
text-align: center;
padding: 20px;
font-weight: 600;
text-transform: uppercase;
transition: .1s ease-in-out;
}
.maps a:hover {
background: black;
transition: .1s ease-in-out;
}
.sub .textBox {
background: white;
position: absolute;
right: 12.5%;
top: 70vh;
padding: 30px;
width: 25%;
min-width: 300px;
text-align: center;
z-index: 5;
display: none;
}
.sub .textBox p {
font-family: 'Arapey', serif;
font-size: 22px;
}
.sub .contact {
background: #EDE8E1;
margin-top: 95vh;
padding: 90px 30px;
}
.sub .contact h2 {
text-align: right;
position: absolute;
width: 30%;
color: #A58A62;
font-family: Cormorant Garamond;
font-size: 44px;
font-style: italic;
font-weight: 400;
}
.socialItems a {
display: inline-block;
float: left;
width: 20%;
text-align: left;
}
.socialItems {
overflow: hidden;
padding-top: 60px;
}
.socialItems br {
display: none;
}
.sub .contact .right p, .sub .contact .right a {
font-size: 20px;
color: black;
transition: .1s ease-in-out;
font-family: Avenir;
font-style: normal;
font-weight: 400;
line-height: 35px;
}
.sub .contact .socialItems a:hover {
color: #c3c3c3;
transition: .1s ease-in-out;
}
.sub .contact .inner > .right {
margin-right: calc(12.5% - 30px);
margin-left: 35%;
}
.contact .contactitems .left, .contact .contactitems .right {
display: inline-block;
background: #A58A62;
color: white;
padding: 30px;
margin: 0em 2em;
position: relative;
height: 250px;
vertical-align: top;
width: 25%;
min-width: 350px;
}
.contact .contactitems .left ul, .contact .contactitems .right ul {
list-style-type: none;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: left;
padding: 30px;
}
.contact .contactitems .left ul li a, .contact .contactitems .right ul li {
color: white;
font-size: 22px;
font-family: 'Arapey', serif;
line-height: 2;
}
.contactitems {
text-align: center;
margin-top: 60px;
}
section.contactform {
background: #f6f6f6;
padding: 60px 30px;
}
.contactform input, .contactform textarea {
padding: 10px;
border: 0px;
background: transparent;
color: black;
border-bottom: 1px solid #A58A62;
font-family: 'Open sans', sans-serif;
min-width: 300px;
resize: none;
font-family: 'Avenir';
}
.contactform input.wpcf7-form-control.wpcf7-submit {
background: #A58A62;
color: white;
text-transform: uppercase;
padding: 15px;
min-width: 300px;
font-size: 1rem;
font-family: 'Avenir';
}
.contactform .col label, .contactform .col p {
display: inline-block;
float: left;
width: calc(25% - 20px);
margin-right: 20px;
overflow: hidden;
}
.contactform .col p label {
width: 100%;
}
div.wpcf7-mail-sent-ok {
border: none;
margin: 0;
padding: 0;
color: #389400;
font-weight: 800;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
border: none;
margin: 0;
padding: 0;
font-weight: 800;
color: #a90d0d;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 50%;
left: initial;
z-index: 100;
border: 0;
background: transparent;
padding: 0;
right: 10px;
transform: translateY(-50%);
font-size: 13px;
color: #a90d0d;
font-weight: bold;
}
.contactform .wpcf7 {
float: left;
width: 70%;
}
.contactform .right {
float: right;
width: 30%;
padding-left: 5%;
}
.contactform .right p{
font-family: Avenir;
font-style: normal;
font-weight: 400;
line-height: 35px;
}
.contactform textarea {
height: 39px;
width: calc(100% - 5px);
}
label .subject input {
width: calc(50% - 5px);
}
.wpcf7 p {
margin-bottom: 20px;
}
.wpcf7 .col > p:nth-of-type(1) {
margin: 0;
}
.contactform .right h2 {
font-size: 2.5em;
font-weight: 800;
width: 210px;
color: #A58A62;
font-family: Cormorant Garamond;
font-style: italic;
font-weight: 400;
line-height: normal;
}
#sb_instagram{
max-width: 1424px;
} body.page-id-20 .home-link {
background: url(https://www.joanneschilder.com/wp-content/uploads/2023/11/joanne-schilder-logo-new-black.svg) no-repeat;
background-size: contain;
background-position: center center;
}
body.page-id-20 .home-link img {
opacity: 0;
}
section.sub.projecten {
text-align: center;
margin-top: 350px;
}
.projecten h1 {
color: #1E1E1C;
text-align: center;
font-family: Cormorant Garamond;
font-size: 54px;
font-style: italic;
font-weight: 400;
line-height: normal;
margin-bottom: 5px;
}
.projecten .inner > p {
color: #000;
text-align: center;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; max-width: 900px;
margin: 0 auto;
line-height: 35px;
}
.projectGrid {
padding: 130px 5% 60px;
position: relative;
overflow: hidden;
}
.projectGrid .project:nth-of-type(5n+1) {
float: left;
width: 60%;
height: 60vh;
}
.projectGrid .project:nth-of-type(5n+2), .projectGrid .project:nth-of-type(5n+3) {
float: right;
height: 30vh;
width: 40%;
}
.projectGrid .project:nth-of-type(5n+5) {
float: left;
width: 40%;
height: 30vh;
}
.projectGrid .project:nth-of-type(5n+4) {
float: right;
width: 60%;
height: 30vh;
}
.projectGrid .project {
position: relative;
overflow: hidden;
flex-basis: 100%;
height: 300px!important;
margin-top: 30px;
border-radius: 20px;
}
.projectGrid{
display: flex;
flex-wrap: wrap;
}
.projectGrid .project .proj-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.projectGrid .project .proj-image img {
width: 100%;
height: auto;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 0;
}
.project-meta div {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: .1s ease-in-out;
}
.project:hover .project-meta div {
opacity: 1;
}
.project-meta {
height: 100%;
background: rgb(0 0 0 / 48%);
opacity: 0;
transition: .2s ease-in-out;
}
.project:hover .project-meta {
opacity: 1;
transition: .2s ease-in-out;
position: relative;
}
.project-meta div h2 {
color: white;
font-size: 2em;
margin-bottom: 10px;
color: #FFF;
font-family: Cormorant Garamond;
font-size: 40px;
font-weight: 400;
}
.project-meta div p {
color: white;
max-width: 450px;
margin: 0 auto;
color: #FFF;
font-family: Avenir;
font-size: 18px;
font-weight: 400;
} @font-face {
font-family: Avenir;
src: url(https://www.joanneschilder.com/wp-content/themes/JoanneSchilder/fonts/Avenir.otf);
}
#swipebox-bottom-bar {
bottom: 0px;
transform: initial !important;
}
.sub.overmij p {
font-family: Avenir, serif;
max-width: 900px;
margin: 0 auto;
margin-bottom: 10px;
color: #000;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 35px;
}
.sub .overmij p:last-of-type {
margin-bottom: 0;
}
.sub.overmij .inner h1 {
text-align: center;
color: #A58A62;
font-family: Cormorant Garamond;
font-size: 44px;
font-style: italic;
font-weight: 400;
line-height: normal;
margin-bottom: 15px;
}
.overmij h2, .overmij h3 {
text-align: center;
font-weight: 800;
margin-top: 50px;
font-family: 'Cormorant Garamond';
color: #A58A62;
font-size: 44px;
font-style: italic;
font-weight: 400;
line-height: normal;
margin-bottom: 15px;
}
.overmij .inner>a>h3{
font-size: 36px;
margin-bottom: 50px;
}
.images img:last-of-type {
width: 100%;
}
#sb_instagram #sbi_images .sbi_item{
border-radius: 25px;
position: relative;
overflow: hidden;
}
#sb_instagram #sbi_images .sbi_item .sbi_photo_wrap{
overflow: hidden;
border-radius: 15px;
}
#sb_instagram #sbi_images .sbi_item::after{
content: url(https://www.joanneschilder.com/wp-content/uploads/2023/12/instragram-white.svg);
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 25px;
left: 25px;
}
#sb_instagram .sbi_photo{
transform: scale(1.2);
}
.images img {
width: 50%;
margin: 0 auto;
height: auto;
float: left;
padding: 10px;
}
.images {
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.overmij div.inner > div:not(.images) {
flex-wrap: wrap;
max-width: 900px;
margin: 0 auto;
}
.overmij h2 {
font-size: 1.5rem;
}
section.sub.overmij {
padding-bottom: 60px;
background: #EDE8E1;
padding-top: 60px;
}
.HeaderSlider {
height: 100vh;
overflow: hidden;
} .owl-item div.active {
opacity: .4;
}
header.project-header {
height: 50vh;
overflow: hidden;
background-size: cover;
background-position: center center;
}
header.project-header img {
width: 100%;
height: auto;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
header.project-header:before {
position: absolute;
width: 100%;
height: 50vh;
top: 0px;
left: 0px;
content: ''; margin: 0;
z-index: 2;
}
.projectMeta {
float: left;
width: 70%;
background: rgba(29, 29, 27, .6);
margin-top: -84px;
position: relative;
padding: 30px 0px;
z-index: 20;
padding-left: 5%;
display: none;
}
section.project-info .maps {
display: none;
}
.projectMeta ul li {
display: inline-block;
color: white;
margin-right: 50px;
}
.projectMeta ul li i {
font-size: 22px;
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
section.project-info h1 {
font-size: 2em;
display: inline-block;
margin-right: 1%;
color: #A58A62;
font-family: Cormorant Garamond;
font-size: 44px;
font-style: italic;
font-weight: 400;
line-height: normal;
}
ul.imagegallery li {
float: left;
width: 50%;
height: 30vh;
border: 3px solid #EDE8E1;
overflow: hidden;
}
ul.imagegallery li a {
height: 100%;
width: 100%;
position: relative;
display: block;
background-size: cover;
background-position: center center;
opacity: 1;
transition: .2s ease-in-out;
}
ul.imagegallery li a:hover {
opacity: .9;
transition: .2s ease-in-out;
}
.project-images{
background: #EDE8E1;
}
ul.imagegallery {
overflow: hidden;
margin: 0% 5%;
padding-bottom: 60px;
background: #EDE8E1;
}
ul.imagegallery li:nth-of-type(10n+4), ul.imagegallery li:nth-of-type(10n+5) {
float: right;
width: 35%;
}
ul.imagegallery li:nth-of-type(10n+3) {
width: 65%;
height: 60vh;
}
ul.imagegallery li:nth-of-type(10n+2) {
width: 65%;
}
ul.imagegallery li:nth-of-type(10n+1) {
width: 35%;
}
ul.imagegallery li:nth-of-type(10n+7), ul.imagegallery li:nth-of-type(10n+8) {
float: left;
width: 35%;
}
ul.imagegallery li:nth-of-type(10n+6) {
width: 65%;
float: right;
height: 60vh;
}
ul.imagegallery li:nth-of-type(10n+10) {
width: 35%;
}
ul.imagegallery li:nth-of-type(10n+9) {
width: 65%;
}
section.project-info {
position: relative;
padding-left: 5%;
padding-top: 60px;
padding-bottom: 60px;
background: #EDE8E1;
}
.project-content {
display: inline-block;
width: 40%;
vertical-align: top;
}
.project-content p {
font-family: 'Arapey', serif;
font-size: 18px;
margin-bottom: 20px;
}
.nav-links a {
padding: 30px;
background: #f6f6f6;
text-decoration: none;
color: #a58a62;
text-transform: uppercase;
font-weight: 800;
width: 100%;
display: block;
}
.nav-links div:nth-of-type(1) a:nth-of-type(1) {
text-align: right;
transition: .2s ease-in-out;
}
.nav-links div:nth-of-type(1) a:nth-of-type(1):hover {
background: #e0e0e0;
transition: .2s ease-in-out;
}
.nav-links > div {
position: relative;
overflow: hidden;
float: left;
width: 50%;
background: #f6f6f6;
}
.nav-links > div:nth-of-type(2), .nav-links > div:nth-of-type(2) a {
background: transparent;
color: white;
}
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
.nav-links > div .thumb {
display: block;
background-size: cover;
height: 84px;
position: absolute;
width: 100%;
top: 0;
background-position: center center;
left: 0;
right: 0;
z-index: -1;
}
.nav-links > div:nth-of-type(2) a {
background: rgba(0, 0, 0, .4);
transition: .2s ease-in-out;
}
.nav-links > div:nth-of-type(2) a:hover {
background: rgba(0, 0, 0, .2);
}
.nav-links {
overflow: hidden;
padding-bottom: 60px;
background: #EDE8E1;
}
footer#colophon {
overflow: hidden;
clear: both;
text-align: center;
background: #A58A62;
font-family: 'Avenir';
}
span.kwakman-logo {
width: 120px;
height: 25px;
display: inline-block;
vertical-align: middle;
background: url(https://www.joanneschilder.com/wp-content/uploads/2018/12/KWA-logo-ZW.png) no-repeat;
background-size: contain;
background-position: center center;
margin-left: 30px;
}
body.home footer#colophon {
display: none;
}
.site-footer p, .site-footer a {
color: #EDE8E1;
text-decoration: none;
transition: .1s ease-in-out;
}
.site-footer a:hover {
color: #d0cdc9;
transition: .1s ease-in-out;
}
footer#colophon p, footer#colophon ul, footer#colophon div {
display: inline-block;
vertical-align: middle;
list-style-type: none;
}
.site-footer ul li {
display: inline-block;
margin: 0px 30px;
text-transform: uppercase;
}
.site-footer .inner {
padding: 30px;
}
.site-footer p {
font-size: 13px;
margin-right: 50px;
}
.site-footer .social {
margin-left: 50px;
}
.site-footer .social a:nth-of-type(2) {
padding-left: 30px;
}
.error404 .home-link {
background: url(https://www.joanneschilder.com/wp-content/uploads/2018/02/Logo-zwart.png)no-repeat;
background-size: contain;
background-position: center top;
}
.error404 .home-link img {
opacity: 0;
} .entry-content {
-webkit-hyphens: auto;
-moz-hyphens:    auto;
-ms-hyphens:     auto;
hyphens:         auto;
word-wrap: break-word;
}
.entry-content a {
}
.entry-content a:hover {
}
.entry-content a, .entry-title a {
text-decoration:none;
}
.entry-title a:hover {
} .error404 footer#colophon {
display: none;
}
.error404 div#content {
text-align: center;
color: black;
position: absolute;
left: 0;
right: 0;
top: 50%;
background: white;
transform: translateY(-50%);
padding: 50px 20px;
} .main-navigation {
clear: both;
margin: 0 auto;
position: relative;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
display: block;
line-height: 1;
margin: 15px 15px;
text-decoration: none;
text-transform:uppercase;
}
.nav-menu li:first-of-type a{
margin-left:0px;
}
.nav-menu li:last-of-type a{
margin-right:0px;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
}
.nav-menu .sub-menu,
.nav-menu .children {
border-top: 0;
padding: 0;
position: absolute;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #fff;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
}
.menu-toggle {
display: none;
}
@media (max-width: 768px) { .menu-toggle {
cursor: pointer;
display: inline-block;
margin: 0;
}
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
background: none;
border: none;
color: #fff;
font-weight: 600;
padding: 12px 0 12px 15px;
font-size: 1.2rem;
}
.toggled-on .nav-menu,
.toggled-on .nav-menu > ul {
display: block;
margin-left: 0;
padding: 0;
width: 100%;
}
.toggled-on li,
.toggled-on .children {
display: block;
}
.toggled-on .nav-menu li > ul {
background-color: transparent;
display: block;
float: none;
margin-left: 20px;
position: relative;
left: auto;
top: auto;
}
.toggled-on .nav-menu li > ul a {
color: #141412;
width: auto;
}
.toggled-on .nav-menu li:hover > a,
.toggled-on .nav-menu .children a {
background-color: transparent;
color: #141412;
}
.toggled-on .nav-menu > li a:hover,
.toggled-on .nav-menu > ul a:hover {
color: #fff;
}
.toggled-on .nav-menu > li a:focus,
.toggled-on .nav-menu > ul a:focus {
color: #fff;
}
}
@media (max-width: 960px) {
input[type="text"],input[type="email"],input[type="tel"],input[type="submit"],textarea {
-webkit-appearance: none;
border-radius: 0;
}
a[href^="tel"]{
color:inherit;
text-decoration:none;
}
}
.menu {
height: 70px;
width: 70px;
text-align: center;
position: absolute;
background: #EDE8E1;
border-radius: 5px;
overflow: visible;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 999;
right: 12.5%;
top: 25%;
}
body:not(.home) .menu {
right: calc(12.5% - 12.75px);
}
.menu.active {
width: 75%;
background: #A58A62;
}
body:not(.home) .menu.active {
width: calc(75% + 12.75px);
}
.page-id-23 .menu.active, .single-post .menu.active {
background: #A58A62;
}
span.toggle.active {
background: #A58A62!important;
}
.page-id-23 span.toggle.active, .single-post span.toggle.active {
background: white;
}
.menu.active .menuContent * {
opacity: 1;
color: white;
}
.page-id-23 .menu.active .menuContent *, .single-post .menu.active .menuContent * {
color: white;
}
.page-id-23 .menu.active .menuContent li.menu-item-has-children ul li a{
color: white;
}
.menu.active span i:nth-child(1) {
transform: rotate(-45deg);
top: 50%;
background-color: white;
}
.menu.active span i:nth-child(2) {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
.page-id-23 .menu.active span i:nth-child(1), .page-id-23 .menu.active span i:nth-child(3), .single-post .menu.active span i:nth-child(1), .single-post .menu.active span i:nth-child(3) {
background-color: white;
}
.menu.active span i:nth-child(3) {
transform: rotate(45deg);
top: 50%;
background-color: white;
}
.menu span {
width: 70px;
height: 70px;
position: absolute;
right: 0;
cursor: pointer;
z-index: 1;
}
.page-id-20 .menu span{
background: #EDE8E1;
}
.menu span i {
position: absolute;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 45%;
height: 2px;
left: 0;
right: 0;
margin: auto;
background-color: black;
-webkit-transition: opacity .1s ease .1s, -webkit-transform .3s ease;
transition: opacity .1s ease .1s, -webkit-transform .3s ease;
transition: transform .3s ease, opacity .1s ease .1s;
transition: transform .3s ease, opacity .1s ease .1s, -webkit-transform .3s ease;
}
.menu span i:nth-child(1) {
top: 40%;
}
.menu span i:nth-child(2) {
top: 50%;
}
.menu span i:nth-child(3) {
top: 60%;
}
li .down {
display: inline-block;
margin-left: 10px;
}
.menu .menuContent {
position: absolute;
width: 100%;
height: 100%;
line-height: 70px;
right: 0px;
text-align: center;
}
.menu .menuContent * {
opacity: 0;
}
.menu .menuContent ul li {
display: inline-block;
margin-left: 0;
margin-right: 0;
color: #2d3235;
-webkit-transition: opacity .3s ease .3s;
transition: opacity .3s ease .3s;
cursor: pointer;
position: relative;
float: left;
height: 70px;
padding-top: 12px;
width: 12%;
}
.menu .menuContent ul.sub-menu li {
float: initial;
width: auto;
height: auto;
background: #A58A62;
display: table;
text-align: left;
padding: 10px 15px;
transition: .1s ease-in-out;
}
.menu .menuContent ul.sub-menu li:hover {
padding-left: 30px;
padding-right: 0;
}
.menu .menuContent ul.sub-menu li a {
font-size: 14px;
}
.menu .menuContent ul li:hover:before {
opacity: .8;
top: 13px;
left: 25px;
}
.menu .menuContent ul.sub-menu li:hover:after, .menu .menuContent ul.sub-menu li:hover:before {
display: none;
}
.menu .menuContent ul li:hover:after {
opacity: .8;
bottom: 13px;
left: -25px;
}
.menu .menuContent ul li:nth-of-type(1):hover:after {
left: -40px;
}
.menu .menuContent ul li:nth-of-type(1):hover:before {
left: 10px;
}
.menu .menuContent ul li#menu-item-15:after {
left: -10px;
}
.menu .menuContent ul li#menu-item-15:before {
left: 40px;
}
.menu .menuContent ul li:before, .menu .menuContent ul li:after {
content: "";
position: absolute;
width: 20px;
height: 2px;
background: #ffffff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.menu .menuContent ul li:before {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
left: 60px;
top: -30px;
opacity: 0;
right: 0;
margin: auto;
}
.menu .menuContent ul li:after {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
left: -60px;
bottom: -30px;
opacity: 0;
right: 0;
margin: auto;
}
@media (max-width: 1024px) {
.contactform .right {
width: 40%;
}
span.kwakman-logo {
margin: 0 auto;
display: block;
margin-top: 20px;
}
.menu .menuContent ul li:before, .menu .menuContent ul li:after {
display: none;
}
.contactform .wpcf7 {
width: 60%;
overflow: hidden;
}
.nav-menu li a {
font-size: 14px;
margin: 15px 5px;
}
.sub .textBox {
top: 50vh;
}
.sub .textBox p, .sub .contact .right p, .sub .contact .right a {
font-size: 20px;
}
.projectGrid .project:nth-of-type(5n+1) {
height: 40vh;
}
.projectGrid .project:nth-of-type(5n+2), .projectGrid .project:nth-of-type(5n+3) {
height: 20vh;
} .project-meta div p {
display: none;
}
.project-meta div h2 {
font-size: 15px;
}
.projectMeta {
width: 100%;
text-align: center;
padding-right: 5%;
margin-top: -85px;
}
.projectMeta ul li {
margin-right: 20px;
}
.project-content {
float: right;
width: 70%;
padding-right: 5%;
}
section.project-info h1 {
float: left;
width: 25%;
}
.maps {
position: relative;
float: left;
height: 250px;
width: 25%;
}
body.page-id-23 .maps {
height: 100%;
position: absolute;
}
.page-id-36 .slider {
height: 57vh;
}
.sub .contact h2 {
text-align: center;
position: relative;
width: 100%;
}
.sub .contact .inner > .right {
margin-right: 0;
margin-left: 0;
}
.sub .textBox p, .sub .contact .right p, .sub .contact .right a {
font-size: 18px;
}
.socialItems a {
text-align: center;
}
.socialItems {
padding-top: 30px;
}
section.sub.overmij {
padding: 60px 5%;
}
}
@media (max-width: 768px) {
.contactform .right {
padding-left: 0;
}
.site-footer ul li {
margin: 0px 10px;
}
.sub .contact {
padding: 60px 5%;;
}
.menu.active {
height: 170px;
}
.menu .menuContent ul li {
width: 40%;
height: 40px;
padding-top: 0;
}
.contact .contactitems .left ul li a, .contact .contactitems .right ul li {
font-size: 18px;
}
.contact .contactitems .left, .contact .contactitems .right {
margin: 0;
width: 45%;
min-width: initial;
}
.projecten .inner > p {
padding: 0 5%;
}
.contactform .wpcf7 {
width: 55%;
}
.contactform .col label, .contactform .col p {
display: inline-block;
float: left;
width: calc(50% - 20px);
margin-right: 20px;
overflow: hidden;
}
.contactform .col p label {
width: 100%;
}
.contactform textarea, label .subject input {
width: calc(100% - 20px);
}
.projectGrid .project .proj-image img {
width: auto;
height: 100%;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.projectMeta {
margin-top: -120px;
}
.projectMeta ul li:nth-of-type(1), .projectMeta ul li:nth-of-type(2) {
margin-bottom: 10px;
}
section.project-info h1 {
font-size: 1.5em;
}
.project-content {
width: 65%;
}
.maps, section.project-info h1 {
width: 30%;
}
.site-footer p {
display: block;
margin-bottom: 15px;
}
}
@media (max-width: 500px) {
body.page-id-23 .home-link, body.page-id-20 .home-link, .single-post .home-link {
width: 300px;
}
.projectMeta ul li {
display: block;
margin-right: 0;
font-size: 13px;
}
.projectGrid .project .proj-image {
z-index: 0;
} .projectMeta {
margin-top: -103px;
padding: 10px 0px;
}
header.project-header {
height: 350px;
}
header.project-header:before {
height: 350px;
}
section.sub {
margin-top: 350px;
}
.page-id-36 .slider {
height: 350px;
}
.projectMeta ul li i {
font-size: 18px;
}
section.project-info {
padding-right: 5%;
}
.maps, section.project-info h1 {
width: 100%;
float: initial;
max-width: initial;
}
.project-content {
width: 100%;
float: initial;
padding-right: 0;
}
section.sub.projecten {
margin-top: 250px;
padding: 0% 5%;
}
.projecten .inner > p {
font-size: 18px;
}
.projectGrid {
padding: 130px 0px 60px;
margin-bottom: 0;
}
.project-meta div h2 {
font-size: 14px;
margin-bottom: 0;
padding: 0% 5%;
}
.nav-links a {
padding: 30px 10px;
}
.site-footer p {
margin-right: 0;
}
.site-footer .social {
margin-left: 0px;
margin-top: 10px;
}
footer#colophon ul {
display: table;
margin: 0 auto;
}
.site-footer ul li {
display: block;
margin: 0;
margin-bottom: 10px;
}
.site-footer ul li:last-of-type {
margin-bottom: 0;
}
body:not(.home) .home-link, body.page-id-419 .home-link, body.page-id-422 .home-link, .error404 .home-link, body.page-id-23 .home-link, body.page-id-20 .home-link, .single-post .home-link, body.page-id-36 .home-link {
left: 10%;
right: initial;
margin: 0 auto;
top: 10%;
width: 200px;
transition: .4s ease-in-out;
z-index: 10;
}
.menu {
height: 50px;
width: 50px;
top: 10%;
right: 10%;
}
.menu span {
width: 50px;
height: 50px;
}
.menu.active {
width: 80%;
max-height: 200px;
height: 100%;
background: black;
}
.menu-menu-container, .nav-menu {
height: 100%;
}
ul#primary-menu {
overflow: initial;
margin-top: 10px;
}
.nav-menu li:first-of-type a {
margin-left: 5px;
}
.menu .menuContent ul li {
display: block;
float: left;
width: 40%;
height: 40px;
padding-top: 0;
}
section.sub.overmij {
padding: 60px 5%;
}
.sub.overmij p {
font-size: 16px;
}
.projecten .inner > p {
padding: 0;
}
.contactform .right {
float: initial;
width: 100%;
text-align: center;
}
.contactform input, .contactform textarea {
min-width: initial;
width: 100%;
}
body.home .home-link {
left: 10%;
right: initial;
margin: 0 auto;
top: 10%;
width: 200px;
transition: .4s ease-in-out;
z-index: 100;
}
body.page-id-20 .slider {
background: #f7f7f7;
}
.contactform .col label, .contactform .col p {
display: block;
float: initial;
width: 100%;
margin-right: 0px;
margin-bottom: 10px;
}
label .subject input, .contactform textarea {
width: 100%;
margin-bottom: 10px;
}
.contactform input.wpcf7-form-control.wpcf7-submit {
min-width: initial;
width: 100%;
}
.contact .contactitems .left, .contact .contactitems .right {
margin: 0;
width: 100%;
min-width: initial;
height: auto;
}
.contactform .right h2 {
width: 100%;
}
section.contactform {
padding: 60px 5% 30px 5%;
}
.contact .contactitems .left ul, .contact .contactitems .right ul {
list-style-type: none;
position: relative;
left: 0;
right: 0;
top: initial;
transform: initial;
text-align: left;
padding: 0px;
}
.contact .contactitems .left ul li a, .contact .contactitems .right ul li {
font-size: 20px;
}
.contactform .wpcf7 {
width: 100%;
}
}
@media (min-width: 500px) {
.page-id-20 div#main > .cta-knoppen {
top: 515px!important;
}
}
@media (min-width: 720px) {
.page-id-20 div#main > .cta-knoppen {
top: 445px!important;
}
.projectGrid .project {
flex-basis: 47.5%;
}
.projectGrid .project:nth-of-type(2n+1) {
margin-right: 5%;
}
}
@media (min-width: 880px) {
.page-id-20 div#main > .cta-knoppen {
top: 415px!important;
}
}
@media (min-width: 1024px) {
.home-link{
width: 315.498px;
height: 458.481px;       
}
body:not(.home):not(.page-id-20) .home-link, body.page-id-419 .home-link, body.page-id-422 .home-link, .error404 .home-link, body.page-id-23 .home-link, body.page-id-20 .home-link, .single-post .home-link, body.page-id-36 .home-link{
width: 193.8px!important;
height: 280.8px!important;
top: 130px!important;
}
body.page-id-20 .home-link {
height: 140px!important;
width: 100px!important;
top: 60px!important;
}
.projectGrid .project{
height: 460px!important;
margin-bottom: 80px!important;
}
section.sub.overmij{
padding-bottom: 120px;
}
.overmij .inner>a>h3{
font-size: 44px;
}
}