/*   
Theme Name: StudioBont
Theme URI: https://www.studio-bont.nl/
Author: Prode - Emma van der Linden
Author URI: https://www.prode.nl/
*/

/* --------------------------------------------
Algemeen
-------------------------------------------- */

* {
box-sizing: border-box;
}

html, body {
height: 100%;
}

#site {
min-height: 92%;
}

body {
background: #f4f3f3;
color: #000;
font-family: 'PT Sans';
font-size: 13px;
margin: 0px;
}

a {
color: #212121;
font-weight: 500;
text-decoration: none;
}

h1, h2 {
color: #000;
font-size: 24px;
font-weight: 400;
display: inline-block;
text-transform: uppercase;
}

h3, h4 {
color: #f73449;
font-size: 14px;
font-weight: 500;
display: inline-block;
}

h4 {
color: #fff;
}

p, li {
line-height: 22px;
}
.subpage .container p {
margin-top: 0;
}

img {
height: auto;
max-width: 100%;
}

.container {
margin: 0 auto;
padding: 0 25px;
position: relative;
width: 1000px;
z-index: 10;
}

.clear {
clear: both;
}

.oranje {
color: #f73449;
}

/* --------------------------------------------
HEADER
-------------------------------------------- */

header {
position: absolute;
top: -2px;
width: 80%;
z-index: 150;
}
.home header:before {
background: #f73449;
content: "";
height: 800px;
left: -273px;
outline: 1px solid transparent;
position: absolute;
-webkit-transform: rotate(346deg);
transform: rotate(346deg);
top: -625px;
width: 138%;
}
header .container {
padding: 0;
pointer-events: none;
top: -60px;
}
header .top {
height: 60px;
position: fixed;
width: 100%;
z-index: 9;
}
header .top .background {
height: 60px;
background: #fff;
position: relative;
width: 100%;
z-index: -5;
}
/*.home header .top:after {
background: #fff;
content: "";
height: 61px;
outline: 1px solid transparent;
position: absolute;
right: 17.1%;
top: -36px;
transform: rotate(346deg);
width: 300px;
z-index: 5;
}*/
.logo {
display: inline-block;
pointer-events: auto;
width: 375px;
}
.logo img {
    height: 30px;
    margin-top: 4%;
	text-align:center;
}

a.club {
    z-index: 999 !important;
    top: 20%;
    position: absolute;
    width: 200px;
    left: 15%;
}

#menuwrapper {
margin: 20px auto;
width: 100%;
}

/* --------------------------------------------
SLIDER
-------------------------------------------- */

.slider {
overflow: hidden;
position: relative;
}
.slider a.button {
background: url('img/knop_home.png');
height: 312px;
position: absolute;
right: 16%;
top: 53%;
width: 425px;
}
.slider a.button:hover {
background: url('img/knop_home_rollover.png');
}

/* --------------------------------------------
Wrapper / content
-------------------------------------------- */

.wrapper {
position: relative;
}

.leesmeer {
left: 50%;
opacity: 0;
position: absolute;
top: -14px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 11;
}

.leesmeer img {
opacity: 0.8;
width: 32px;
}

.leesmeer:hover img {
opacity: 1;
}

.leesmeer.visible {
opacity: 0.8;
}

/* -------------------
Wrapper Wit
-------------------------------------------- */

.home .wrapper.wit {
background: #fff;
margin-top: -17px;
padding-bottom: 50px;
}

.home .wrapper.wit:before {
background: #fff;
content: "";
height: 400px;
position: absolute;
top: -102px;
width: calc(100% + 32px);
z-index: 5;
background: #fff;
left: -50px;
-webkit-transform: rotate(186deg);
transform: rotate(186deg);
}

.home .wrapper.wit .leesmeer {
top: -111px;
}

/* -------------------
Wrapper Oranje
-------------------------------------------- */

.wrapper.oranje {
background: #270586;
padding: 30px 0 50px;
}

.oranje .content {
color: #fff;
}

.oranje .content h5 {
font-size: 15px;
font-weight: 400;
margin-top: 0;
}

#home-oranje .content h4 {
display: block;
}

/* -------------------
Connect
-------------------------------------------- */

.connect .content {
	height: 80%;
	left: 0;
	position: absolute;
	right: 0;
	top: 10%;
	width: 35%;
}

.connect img {
display: block;
height: 250px;
margin: 0 auto;
}

.connect .marie-cecile {
bottom: 4px;
color: #f73449;
font-size: 15px;
left: -110px !important;
position: absolute;
transition: 0.4s;
}

.connect .marie-cecile:after {
background: #f73449;
border-radius: 15px;
content: "";
display: inline-block;
height: 25px;
position: absolute;
right: -32px;
top: 7px;
transition: 0.4s;
width: 25px
}

.connect .tessa {
color: #f73449;
position: absolute;
right: -30px !important;
top: -22px !important;
transition: 0.4s;
}

.connect .tessa:after {
background: #f73449;
border-radius: 15px;
content: "";
display: inline-block;
height: 25px;
left: -10px;
position: absolute;
top: 20px;
transition: 0.4s;
width: 25px;
}

.connect .marie-cecile:hover,
.connect .tessa:hover {
color: #f73449;
}

.connect .marie-cecile:hover:after,
.connect .tessa:hover:after {
background: #f73449;
}

/* -------------------
Container Wit (Projecten)
-------------------------------------------- */

.container.wit {
background: #fff;
}

.projecten .container.wit {
padding: 50px 0 40px;
}

.projecten .projects ul {
width: 100%;
}

.projecten .projects ul li {
display: inline-block;
float: none !important;
margin-right: 4px !important;
text-align: center;
vertical-align: top;
width: 32.83% !important;
}

.projecten .projects ul li:last-child {
margin-right: 0 !important;
}

.projecten .projects ul.projects li.project .project-thumbnail, 
.projecten .projects-page ul.projects li.project .project-thumbnail {
margin: 0;
}

.projecten li .project-permalink h3 {
font-weight: 600;
margin-bottom: 0 !important;
}

.projecten li .short-description p {
color: #706e6e;
margin: 0;
padding: 0 12px;
}

.home .wrapper.projecten:before {
background: #f4f3f3;
content: "";
height: 400px;
position: absolute;
top: -102px;
width: calc(100% + 32px);
z-index: 5;
background: #f4f3f3;
left: -50px;
-webkit-transform: rotate(186deg);
transform: rotate(186deg);
}

.titel h3 {
    font-weight: 500 !important;
}

.btn-meer {
border: 2px solid #270586;
display: table;
margin: 50px auto 0;
transition: 0.4s;
}
.btn-meer a,
.btn-meer p {
cursor: pointer;
color: #270586;
display: block;
font-size: 20px;
margin: 0;
padding: 10px 45px 12px;
}
.btn-meer:hover {
background: #270586;
}
.btn-meer:hover a,
.btn-meer:hover p {
color: #fff !important;
}

/* -------------------
Wrapper Groen
-------------------------------------------- */

.home .wrapper.groen {
background: #f73449;
padding: 40px 0 50px;
}
.home .wrapper.groen:after {
background: #f73449;
bottom: -167px;
content: "";
height: 170px;
position: absolute;
width: 100%;
z-index: 12;
}
.home .wrapper.groen .container {
padding: 0 25px;
}
.groen .swipe-mobile {
display: none;
}
.groen .chpcs_image_carousel .chpcs_prev,
.groen .chpcs_image_carousel .chpcs_next {
font-size: 55px;
opacity: 0.6;
position: absolute;
transition: 0.4s;
width: 45px;
}
.groen .chpcs_image_carousel .chpcs_prev:hover,
.groen .chpcs_image_carousel .chpcs_next:hover {
opacity: 1;
}
.groen .chpcs_image_carousel .chpcs_prev {
left: -70px;
}
.groen .chpcs_image_carousel .chpcs_next {
right: -71px;
}
.groen .chpcs_image_carousel .chpcs_prev img, 
.groen .chpcs_image_carousel .chpcs_next img {
margin-top: 11px;
width: 29px;
}

.caroufredsel_wrapper,
#wa_chpc_slider,
.chpcs_foo_content {
left: 0 !important;
margin: 2px 0 !important;
padding: 5px 0 !important;
width: 100% !important;
}

.groen .chpcs_img {
float: left;
}

.groen .stw .inhoud {
color: #fff;
display: inline-block;
padding-left: 30px;
text-align: left;
vertical-align: top;
width: 79%;
}

.chpcs_image_carousel .chpcs_title, 
.chpcs_image_carousel .chpcs_foo_content p {
color: #fff;
padding-left: 22%;
position: absolute;
text-align: left;
width: 100%;
}
.chpcs_image_carousel .chpcs_title a {
color: #fff;
text-transform: uppercase;
}

.groen h2 {
color: #f73449;
}

.groen h3,
.groen h4 {
text-transform: uppercase;
display: block;
margin: 0;
}

.groen h3 {
color: #faf876;
font-size: 16px;
}

.groen h4 {
color: #fff;
font-size: 13px;
}

/* -------------------
Container Wit (Name Dropping)
-------------------------------------------- */

.home .wrapper .name-dropping {
padding-bottom: 50px;
padding-top: 110px;
}
.wrapper .name-dropping h2 {
color: #f73449;
}
.name-dropping .content {
padding: 0 120px;
}
.name-dropping .content p {
margin: 0 0 40px;
}
.name-dropping .content p:last-child {
margin-bottom: 0;
}
.name-dropping .content a {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 24.6%;
}
.name-dropping .content a img {
display: block;
margin: 0 auto;
}

/* -------------------
Wrapper Geel
-------------------------------------------- */

.wrapper.geel {
background: #f73449;
padding: 50px 0;
}

.btn-nieuwsbrief {
border: 2px solid #270586;
display: table;
margin: 0 auto;
transition: 0.4s;
}

.btn-nieuwsbrief a {
    color: #fff;
    display: block;
    font-size: 18px;
    padding: 10px 45px 12px;
    background-color: #270586;
}
.btn-nieuwsbrief:hover {
background-color: #fff;
}
.btn-nieuwsbrief:hover a {
color: #270586;
background-color:#fff;
}


/* --------------------------------------------
SUBPAGINA'S
-------------------------------------------- */

.wrapper.groen {
background: #270586;
padding: 192px 0 0;
}
.wrapper.groen:after {
background: #270586;
bottom: -124px;
content: "";
height: 150px;
left: -51.5%;
outline: 1px solid transparent;
pointer-events: none;
position: absolute;
-webkit-transform: rotate(350deg);
transform: rotate(350deg);
width: 100%;
z-index: 11;
}
.wrapper.groen .container {
padding: 0;
z-index: 14;
}
.subpage .container {
background: #fff;
padding: 120px 90px 50px;
}

/* --------------------------------------------
OVER ONS
-------------------------------------------- */

.extraveld {
margin-top: 50px;
}

/* --------------------------------------------
PORTFOLIO
-------------------------------------------- */

.post-type-archive .wrapper.groen:after {
height: 0;
}

#containerportfolio .mix{
display: none;
}

.wrapper .categorieen {
bottom: 23px;
position: absolute;
right: 0;
}
.wrapper .categorieen .filter {
color: #fff;
display: inline-block;
font-size: 14px;
margin-left: 12px;
text-transform: uppercase;
transition: 0.4s;
}

.wrapper .categorieen .filter.active,
.single .wrapper .categorieen .filter.alles:hover {
color: #f73449;
cursor: pointer;
}

.wrapper .categorieen .filter.alles,
.wrapper .categorieen .filter:hover{
color: #f73449;
cursor: pointer;
}

.single .wrapper .categorieen .filter.alles {
color: #fff;
}

.portfolio .projects.columns-5 ul.projects {
margin-top: -5px;
}
.portfolio .projects.columns-5 ul.projects li.project {
clear: none !important;
margin: 5px 0.4% 0 0 !important;
margin: 0 0.4% 6px 0;
position: relative;
width: 19.6%;
}
.portfolio .projects ul.projects li.project .titel {
border: 2px solid #fff;
left: 0;
margin: 0 auto;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 30%;
width: 50%;
}
.portfolio .projects ul.projects li.project h3, 
.projects-page ul.projects li.project h3 {
color: #fff;
font-size: 16px;
margin: 0;
padding: 10px;
text-transform: uppercase;
}
.portfolio .projects.columns-5 ul.projects li.project img {
transition: 0.4s;
}
.portfolio .projects.columns-5 ul.projects li.project:hover img {
-webkit-filter: brightness(60%);
-moz-filter: brightness(60%);
-ms-filter: brightness(60%);
-o-filter: brightness(60%);
filter: brightness(60%);
}
.portfolio .projects.columns-5 ul.projects li.project:hover .titel {
opacity: 1;
transition: 0.4s;
top: 40%;
}
.portfolio .projects ul.projects li.project .project-thumbnail {
margin-bottom: 0 !important;
}
.portfolio .projects .short-description {
display: none;
}

/* --------------------------------------------
PORTFOLIO PROJECT
-------------------------------------------- */

/*.single-project .wrapper.groen .widget_projects_categories {
display: none;
}*/
    
/* Widget Categories */
.single.projects-page .groen .widget_projects_categories ul {
list-style: none;
margin: 0;
padding: 0;
}
.single.projects-page .groen .widget_projects_categories ul li {
display: inline-block;
line-height: normal;
margin-left: 9px;
transition: 0.4s;
}
.single.projects-page .groen .widget_projects_categories ul li a {
color: #fff;
font-size: 14px;
text-transform: uppercase;
transition: 0.4s;
}
.single.projects-page .groen .widget_projects_categories ul li a:hover,
.single.projects-page .groen .widget_projects_categories ul li.current-cat a,
.single .groen .widget_projects_categories ul li.cat-item-12 a{
color: #faf876;
}

.single-project .wrapper.portfolio {
background: #fff;
margin: 0 auto;
padding: 80px 90px 0;
width: 1000px;
}
.single-project .wrapper.portfolio h1 {
margin-bottom: 0;
}
.portfolio .project-meta .categories .single-project-categories li:first-child {
display: none;
}
.single-project .wrapper.portfolio p {
color: #706e6e;
}
.single-project.has-gallery .wrapper.portfolio .gallery {
width: 100%
}
.single-project.has-gallery .wrapper.portfolio .gallery a {
margin-bottom: 20px;
}
.single-project.has-gallery .wrapper.portfolio .gallery a:last-child {
margin-bottom: 0;
}
.single-project .wrapper.portfolio .project-meta,
.single-project .wrapper.portfolio .mediamiddelen, 
.single-project .wrapper.portfolio .client {
display: inline-block;
}
.single-project .wrapper.portfolio .categories ul {
list-style: none;
margin: 0;
padding: 0;
}
.single-project .wrapper.portfolio .categories ul li {
display: inline-block;
padding-left: 5px;
}
.single-project-categories li:after {
color: #f73449;
content: ".";
padding-left: 5px;
}
.single-project-categories li:last-child:after {
content: "";
}
.single-project .wrapper.portfolio .mediamiddelen {
color: #f73449;
padding-left: 5px;
text-transform: uppercase;
}
.single-project .wrapper.portfolio .client {
margin-top: -15px;
padding-right: 90px;
position: absolute;
right: 0;
}
.single-project .wrapper.portfolio .client h3 {
color: #000;
font-size: 13px;
margin: 0;
}
.single-project .wrapper.portfolio .client .client-name {
color: #f73449;
text-transform: uppercase;
}
.single-project .wrapper.portfolio .summary {
padding-left: 0;
width: 100%;
}
.single-project .wrapper.portfolio .project .summary .url {
margin-bottom: 0;
margin-top: 40px;
padding-bottom: 20px;
}

/* Share Buttons */
.single-project .single-project-description .shareaholic-canvas {
display: none !important;
}
.single-project .shareaholic-share-buttons-container ul.shareaholic-share-buttons {
margin-left: 0 !important;
}
.shareaholic-share-buttons-wrapper ul.shareaholic-share-buttons li .shareaholic-share-button-container i.service-facebook:before {
content: "\f09a" !important;
font-family: 'fontawesome' !important;
font-size: 26px;
padding: 0 4px;
}
/* End Share Buttons */

.single-project .wrapper.portfolio .project .summary .project-url:before {
content: "";
}
.project-url {
display: table;
margin: 0 auto;
}
.single-project .wrapper.portfolio .project .summary .project-url:before {
margin-right: 0;
}
.single-project .wrapper.portfolio .project .summary .project-url a {
border: 2px solid #9ca293;
display: inline-block;
color: #9ca293;
display: block;
font-size: 20px;
padding: 10px 45px 12px;
transition: 0.4s;
}
.single-project .wrapper.portfolio .project .summary .project-url a:hover {
background: #9ca293;
color: #fff;
}
.single-project .terug-link {
padding-bottom: 40px;
text-align: center;
}
.single-project .terug-link a {
color: #270586;
font-size: 20px;
transition: 0.4s;
}
.single-project .terug-link a:hover {
color: #f73449;
}

/* --------------------------------------------
UPDATE
-------------------------------------------- */

.update {
display: inline-block;
margin: 0 30px 30px 0;
vertical-align: top;
width: 47.9%;
}
.update:nth-child(2n) {
margin-right: 0;
}
.update img {
margin-bottom: 0 !important;
}
.update .placeholder {
background: #EBEAEA;
height: 243px;
width: 100%;
}
.update .content {
background: #f0f0f0;
margin-top: -4px;
padding: 15px;
}
.update h3 {
color: #000;
font-size: 24px;
margin: 0 0 15px !important;
text-transform: uppercase;
height:62px;
}
.update .subcontent p {
margin-bottom: 25px;
}
.update a,
.singlepage a,
.portfolio .project div a {
color: #f73449;
}
.update a:hover,
.singlepage a:hover,
.portfolio .project div a:hover {
color: #9ca293;
}
.update.meer {
display: none;
}
#btn-meer {
display: none;
}

/* --------------------------------------------
UPDATE SINGLE
-------------------------------------------- */

.singlepage .wp-caption-text {
margin-bottom: 30px;
}
.singlepage .datum {
float: right;
text-transform: uppercase;
}
.singlepage h1 {
color: #000;
font-size: 24px;
margin: 40px 0 15px;
text-transform: uppercase;
width: 75%;
}
.singlepage p, 
.singlepage li {
color: #706e6e;
}
.singlepage h1 {
display: block;
}
/*.singlepage h2 {
color: #706e6e;
display: block;
margin-bottom: 0;
font-size: 20px;
text-transform: inherit;
}
.singlepage h3,*/
.singlepage h4 {
color: #000;
display: block;
font-size: 20px;
margin-bottom: 0;
}
.singlepage .tags {
margin-bottom: 50px;
}
.singlepage .tags h5 {
display: inline;
font-size: 18px;
font-weight: 400;
margin-right: 2px;
}
.singlepage .tags .tag {
display: inline;
margin-right: 2px;
text-transform: uppercase;
}
.share-button-sizing {
border: 1px solid #3f3f3e !important;
border-radius: 25px;
padding: 1px;
}
.recente-publicaties .update:nth-child(2) {
margin-right: 30px;
}
.recente-publicaties .update:nth-child(3) {
margin-right: 0;
}

/* --------------------------------------------
CONTACT
-------------------------------------------- */

.wrapper.contacttop {
background-position: top;
background-size: cover;
height: 838px;
pointer-events: none;
width: 100%;
z-index: 10;
top: 58px;
}
.wrapper.contact {
margin-top: -90px;
z-index: 1;
}
.contact .wit:before {
background: #fff;
content: "";
height: 200px;
left: 0;
position: absolute;
top: -199px;
width: 100%;
z-index: 5;
}
.contact .wit {
padding-bottom: 20px;
}
.contact h2 {
display: block;
color: #f73449;
padding-top:3%; 
}
.contact .links,
.contact .rechts {
display: inline-block;
vertical-align: top;
width: 49%;
}
.contact .links {
padding-left: 20%;
}
.contact .links p,
.contact .rechts p {
color: #5e5e5e;
font-size: 15px;
margin: 0;
}
.contact a {
color: #5e5e5e;
}
.contact a:hover {
color: #f73449;
}

.wrapper.contactgrijs {
background: #f73449;
padding-bottom: 50px;
}
.contactgrijs .container {
z-index: 14;
}
.contactgrijs h3 {
color: #270586;
font-size: 24px;
}
.contactgrijs .formulier {
margin: 0 auto;
width: 75%;
}
.wpcf7 .item {
color: #fff;
display: inline-block;
font-size: 15px;
vertical-align: top;
width: 10%;
}
input[type="checkbox"] { 
width:2%!important; 
 }
span.wpcf7-list-item {
    width: 100%!important;
}
.wpcf7 input,
.wpcf7 textarea {
background: #ebebeb;
border:none;
color: #5e5e5e;
font-family: "PT Sans";
font-size: 13px;
padding: 12px;
width: 100%;
}
.wpcf7 input[type="submit"] {
background: #fff;
border: 2px solid #ebebeb;
color: #270586;
cursor: pointer;
float: right;
font-size: 16px;
padding: 10px 40px 12px;
transition: 0.4s;
width: auto;
}
.wpcf7 div.wpcf7-response-output {
margin-top: 50px;
padding: 10px 15px;
width: 99.1%;
}
.wpcf7 input[type="submit"]:hover {
background: #270586;
color: #fff;
}
.wpcf7 div.wpcf7-validation-errors {
background: #f73449;
border: 2px solid #f73449;
color: #fff;
}
.wpcf7 div.wpcf7-mail-sent-ok {
background: #9ca293;
border: 2px solid #9ca293;
color: #fff;

}

.wrapper.smgeel {
z-index: 10;
}
.smgeel .container {
background: #f4f3f3;
padding: 100px 0 32px;
}
.smgeel .icons {
display: table;
margin: 0 auto !important;
}
.smgeel .icons .icoon {
border: 1px solid #3f3f3e;
border-radius: 26px;
display: inline-block;
margin-right: 10px;
padding: 8px 5px 5px;
transition: 0.4s;
}
.smgeel .icons .icoon img {
transition: 0.4s;
}
.smgeel .icons .icoon:last-child {
margin-right: 0;
}
.smgeel .icons .icoon:hover {
background: #270586;
}
.smgeel .icons .icoon:hover img {
-webkit-filter: brightness(450%);
-moz-filter: brightness(450%);
-ms-filter: brightness(450%);
-o-filter: brightness(450%);
filter: brightness(450%);
}
.nieuwsbrief .container {
padding: 50px;
z-index: 10;
}

.wrapper.nieuwsbrief .container.wit {
    background: #f4f3f3;
}

.wpseo-location h3{
margin:0px;
font-size:15px!important;
}

.contact .wpseo-address-wrapper{
font-size:15px!important;
}

/* --------------------------------------------
MAIL CHIMP
-------------------------------------------- */

.subpage .edit-link {
display: none;
}
.subpage .yikes-easy-mc-form label span {
text-transform: uppercase;
}
.subpage .yikes-easy-mc-form input[type="text"], 
.subpage .yikes-easy-mc-form input[type="email"] {
background: #fff;
border: 1px solid #d0d0d0;
color: #5e5e5e;
float: right;
font-family: "PT Sans";
font-size: 13px;
padding: 12px;
width: 88%;
}
.subpage .yikes-easy-mc-form input[type="text"]:focus,
.subpage .yikes-easy-mc-form input[type="email"]:focus {
outline: none;
}
.subpage .yikes-easy-mc-form .yikes-easy-mc-submit-button {
background: #fff;
border: 2px solid #d0d0d0;
color: #d0d0d0;
float: right;
font-size: 16px;
padding: 10px 40px 12px;
text-transform: uppercase;
transition: 0.4s;
width: auto;
}
.subpage .yikes-easy-mc-form .yikes-easy-mc-submit-button:hover {
background: #d0d0d0;
color: #fff;
}

/* --------------------------------------------
FOOTER
-------------------------------------------- */

footer .groen {
background: #270586;
padding: 50px 0;
}

footer h5 {
color: #f73449;
font-size: 16px;
font-weight: 400;
margin: 0;
text-transform: uppercase;
}

footer .widget_text {
color: #fff;
display: inline-block;
font-size: 12px;
line-height: 24px;
vertical-align: top;
width: 25%;
}

footer .WPSEO_Show_Address{
color: #fff;
display: inline-block;
font-size: 12px;
line-height: 24px;
vertical-align: top;
width: 25%;
}

footer .widget_text p {
margin: 0;
}

footer .widget_text a {
color: #fff;
transition: 0.4s;
}

footer .widget_text a:hover {
color: #faf876;
}

footer .algemene-voorwaarden {
display: block;
margin-top: 40px;
}


/* --------------------------------------------
Nieuws
-------------------------------------------- */

#nieuws #postdate {
color: #999;
font-size: 11px;
font-weight: bold;
}

#artikel {
display: inline-block;
margin: 0 1% 30px 1%;
vertical-align: top;
width: 22.7%;
}

#artikel h2 {
font-size: 18px;
margin-bottom: 5px;
}

.entry a.readmore {
background: #999;
color: #fff;
display: inline-block;
font-weight: 400;
padding: 5px 10px;
}

#artikel #featuredimage {
background: #999;
height: 100px;
overflow: hidden;
position: relative;
width: 100%;
}

#artikel #featuredimage img {
bottom: -100%;
height: auto;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: -100%;
width: 100%;
}

#featuredimagegroot {
float: right;
margin: 0 0 20px 20px;
}


/* --------------------------------------------
Menu
-------------------------------------------- */
/*************** Menu *****************/
/* The container wrapping ul.dropdown */

#menu {
display: inline-block;
margin: 0 auto;
padding-top: 14px;
pointer-events: auto;
text-align: left;
vertical-align: top;
width: calc(100% - 380px);
}

/* Top level Unordered list */
#menu ul.dropdown {
float: none;
list-style: none;
margin: 0px;
padding: 0px;
text-align: left;
}
 
#menu ul.dropdown li {
display: inline-block;
text-align: left;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
 
#menu ul.dropdown a {
font-size: 13px;
font-weight: 400;
color: #000;
margin: 0 18px;
line-height: 30px; 
list-style: none;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}

#menu ul.dropdown li:first-child a {
margin-left: 0;
}
 
/* Style the link hover */
#menu ul.dropdown li:hover a {
color: #f73449;
}

#menu ul.dropdown li.current-menu-item a {
color: #f73449;
}
 
/* Displays the link as blocks. */
#menu ul.dropdown li ul a {
display: block;
width: 70px;
}
 
/* sub menus!!  */
 
#menu ul.dropdown ul {
border: 1px solid #000;
list-style: none;
margin: 0px; 
padding: 0;
position: absolute; 
width: auto;
z-index: 500;
text-align:center;
margin-left:-16px;
padding-top:1px;
}

#menu ul.dropdown li#menu-item-15 ul {
margin-left:9px;
}

#menu ul.dropdown ul li {
background: #fff;
display: block;
text-align: center !important;
}
 
/* Drop Down! */
 
/* Hide all the dropdowns (submenus) */
#menu ul.dropdown ul,
#menu ul.dropdown li:hover ul ul,
#menu ul.dropdown ul li:hover ul ul { 
display: none;
}
 
#menu ul.dropdown li li a {
background: #ffffff !important;
border: none;
color: #f73449 !important;
display: inline;
font-size: 12px;
font-weight: 300;
line-height: 30px;
margin: 0;
padding: 7px 7px 6px;
text-align: center;
text-decoration: none;
text-transform: none;
}


/* Display the submenus only when li are hovered */
#menu ul.dropdown li:hover ul,
#menu ul.dropdown ul li:hover ul ,
#menu ul.dropdown ul li ul li:hover ul { 
display: block;
}
 
#menu ul.dropdown li li:hover {
background: #f73449 !important;
}

#menu ul.dropdown li * a:hover {
/* Change color of links when hovered */
background: #f73449 !important;
color: #fff !important;
line-height: 30px;
text-decoration: none;
}

#menu .dropdown li > a:after {
color: #000;
/*content: '▾';*/
margin-left: 2px;
}

#menu .dropdown li > a:hover:after {
color: #f73449;
/*content: '▾';*/
margin-left: 2px;
}

#menu .dropdown li.current-menu-item > a:after {
color: #f73449;
/*content: '▾';*/
margin-left: 2px;
}

#menu .dropdown li > a:only-child:after {
/*content: '';*/
}



























@media only screen and (max-width:500px ){

.container,
.single-project .wrapper.portfolio {
width: 100%;
}
iframe {
height: auto;
width: 100%;
}
    
/* --------------------------------------------
HEADER
-------------------------------------------- */

header {
width: 100%;
}
header .top .background {
display: none;
}
header .top {
    height: 65px;
    background-color: #fff;
}
header .container {
top: 0;
}
.logo {
display: block;
margin: 0 auto;
width: 50%;
}

.logo img { 
margin-top: 8%;
}

#menu {
display: none;
}
.home header:before {
height: 0;
}	
		
a.club {
    z-index: 999 !important;
    top: 25%;
    position: absolute;
    width: 100px;
    left: 7%;
}

/* --------------------------------------------
Wrapper / content
-------------------------------------------- */

.leesmeer {
display: none;
}

.slider a.button {
display: none;
}
.home .wrapper.wit:before {
height: 50px;
left: -33px;
top: -20px;
}
.projecten .projects ul li {
margin-right: 0 !important;
width: 100% !important;
}
.projecten .projects {
padding-bottom: 5px;
}   
.home .wrapper.groen {
padding-bottom: 0;
}
.home .wrapper.groen .container {
padding: 0 2.5%;
}
.groen .swipe-mobile {
color: #fff;
display: block;
padding-bottom: 5px;
text-align: center;
}
.groen .chpcs_image_carousel {
padding: 0;
}
.groen .chpcs_image_carousel .chpcs_prev,
.groen .chpcs_image_carousel .chpcs_next {
display: none !important;
}
.groen .stw .inhoud {
width: 100%;
}
.groen #wa_chpc_slider,
.groen .caroufredsel_wrapper,
.groen .chpcs_foo_content {
height: 515px !important;
}
.groen .chpcs_img {
float: none;
}
.chpcs_image_carousel .chpcs_title, 
.chpcs_image_carousel .chpcs_foo_content p {
padding-left: 0;
}
.groen .stw .inhoud {
padding: 0 10px;
/*width: 34%;*/
}
.name-dropping .content {
padding: 0;
}
.name-dropping .content a {
width: 24%;
}
.connect img,
.connect a {
display: none;
}
.wrapper.connect {
background: #fff;
}
.connect .content {
position: relative;
}
/*.mobile-connect,
.mobile-connect a {
display: block;
text-align: center;
}*/
    
.wrapper.groen {
padding-top: 65px;
}
.wrapper.groen .container {
padding: 0 25px;
}
.home .wrapper.groen:after,
.wrapper.groen:after {
bottom: -9px;
left: -50%;
}
	
.home .wrapper.projecten:before { 
display:none !important; 
}

/* -------------------
PORTFOLIO ARCHIVE
-------------------------------------------- */
    
.wrapper .categorieen {
bottom: 0;
position: relative;
}
.archive.projects-page .groen .widget_projects_categories {
position: relative;
}
.archive.projects-page .groen .widget_projects_categories ul li {
padding-left: 0;
padding-right: 10px;
}
.portfolio .projects.columns-5 ul.projects li.project {
margin-right: 0;
width: 100%;
}
.portfolio .projects ul.projects li.project .titel {
background: rgba(255,255,255,0.8);
opacity: 1;
top: 40%;
}
.portfolio .projects ul.projects li.project .titel h3 {
color: #000 !important;
font-weight: 500 !important;
}
 
/* -------------------
PORTFOLIO SINGLE
-------------------------------------------- */
    
.single-project .wrapper.portfolio {
padding: 65px 10px 0;
}
.single h1,
.single h2 {
display: block;
}
.single-project .wrapper.portfolio .mediamiddelen {
padding-left: 0;
}
.single-project .wrapper.portfolio .client {
margin-top: 0;
padding-right: 0;
position: relative;
}
	
.client h3 {
    font-weight: 500 !important;
}

/* -------------------
UPDATE
-------------------------------------------- */

.subpage .container {
padding: 65px 10px 30px;
top: -20px;
}
.update {
margin-right: 0;
width: 100%;
}
.update h3 {
margin: 0 !important;
}
.singlepage h3 {
margin: 20px 0 5px;
width: 100%;
}
.singlepage img {
margin-bottom: 15px;
}
.recente-publicaties .update:nth-child(2) {
margin-right: 0;
}
    
/* -------------------
CONTACT
-------------------------------------------- */

.wrapper.contacttop {
height: 270px;
}
    
.wrapper.contact {
margin-top: 0;
}
.contact .links {
margin-bottom: 14px;
padding-left: 0;
vertical-align: top;
width: 52%;
}
.contact .rechts {
width: 45%;
}
.contact .links p, 
.contact .rechts p {
font-size: 14px;
}
.contact a {
display: block;
}
.contactgrijs .formulier {
width: 100%;
}
.contact h2 {
padding-top: 5%;
}
.wpcf7 input, 
.wpcf7 textarea {
width: 100%;
}  
.wpcf7-form-control.wpcf7-submit {
    margin-right: 10% !important;
}  
span.wpcf7-list-item {
    width: 100%!important; 
}
.smgeel .container {
padding-top: 85px;
}
.wrapper.smgeel .container:before {
height: 300px;
pointer-events: none;
top: -90px;
}
.wrapper.contactgrijs {
padding-bottom: 65px;
}
.wrapper.contactgrijs::after {
bottom:  -40px;
left: -45px
width: 130%;
}
    
/* --------------------------------------------
FOOTER
-------------------------------------------- */

footer .container {
padding: 0 10px;
}
footer .groen {
padding: 50px 10px;
}
footer .widget_text,
footer .WPSEO_Show_Address {
margin-bottom: 25px;
text-align: center;
width: 100%;
}
footer .widget_text:last-child {
margin-bottom: 0;
}

}




























@media only screen and (min-width: 501px) and (max-width:600px ){

.container,
.single-project .wrapper.portfolio {
width: 90%;
}
iframe {
height: auto;
width: 100%;
}
    
/* --------------------------------------------
HEADER
-------------------------------------------- */

header .top .background {
height: 10px;
}
header .top .background:after {
top: -195px;
}
.home header:before {
height: 100px;
left: -183px;
top: -30px;
}
header .top {
    height: 65px;
    background-color: #fff;
}
header .container {
top: -10px
}
.logo {
width: 55%;
}	
.logo img { 
margin-top: 8%;
}	
#menu {
display: none;
}
.home .wrapper.wit:before {
height: 300px;
top: -30px;
}
	
a.club {
    z-index: 999 !important;
    top: 25%;
    position: absolute;
    width: 100px;
    left: 7%;
}

/* --------------------------------------------
Wrapper / content
-------------------------------------------- */

.leesmeer {
display: none;
}

.slider a.button {
background-repeat: no-repeat;
background-size: 200px auto;
right: -42%;
top: 42%;
}
.slider a.button:hover {
background-repeat: no-repeat;
background-size: 200px auto;
}
    
.projecten .projects ul li {
margin-right: 0 !important;
width: 100% !important;
}
.projecten .projects {
padding-bottom: 5px;
}
.connect img,
.connect a {
display: none;
}
.connect .content {
background: #fff;
}
.connect .content {
margin-top: -20px;
padding-top: 20px;
position: relative;
}
.groen .chpcs_image_carousel .chpcs_prev {
left: -45px;
}
.groen .chpcs_image_carousel .chpcs_next {
right: -45px;
}
.groen .stw .inhoud {
width: 100%;
}
.groen .caroufredsel_wrapper {
height: 425px !important;
}
.groen #wa_chpc_slider {
height: 425px !important;
}
.chpcs_image_carousel .chpcs_foo_content {
height: 402px !important;
}
.groen .chpcs_img {
float: none;
}
.chpcs_image_carousel .chpcs_title, 
.chpcs_image_carousel .chpcs_foo_content p {
padding-left: 0;
}
.groen .stw .inhoud {
padding: 0;
width: 40%;
}
.home .wrapper.groen::after {
bottom: -45px;
}
.name-dropping .content {
padding: 0;
}
.name-dropping .content a {
width: 24%;
}
    
.wrapper.groen {
padding: 115px 0 0;
}
.wrapper.groen:after {
bottom: -45px;
}
    
/* -------------------
PORTFOLIO ARCHIVE
-------------------------------------------- */
    
.archive.projects-page .groen .widget_projects_categories {
bottom: 12px;
position: relative;
}
.archive.projects-page .groen .widget_projects_categories ul li:first-child {
padding-left: 0;
}
.portfolio .projects.columns-5 ul.projects li.project {
margin: 5px 1% 0 0 !important;
width: 49.5%;
}
.portfolio .projects.columns-5 ul.projects li.project:nth-child(2n) {
margin-right: 0 !important;
}
.portfolio .projects ul.projects li.project .titel {
opacity: 1;
top: 40%;
}
    
/* -------------------
PORTFOLIO SINGLE
-------------------------------------------- */
    
.single-project .wrapper.portfolio {
padding: 60px 20px 0
}
.single-project .wrapper.portfolio .project-meta, 
.single-project .wrapper.portfolio .mediamiddelen, 
.single-project .wrapper.portfolio .client {
display: block;
padding-left: 0;
}
.single-project .wrapper.portfolio .client {
margin-top: 0;
padding-right: 0;
position: relative;
right: 0;
}
    
/* -------------------
UPDATE
-------------------------------------------- */
    
.update {
width: 100%;
}
    
/* -------------------
CONTACT
-------------------------------------------- */
 
.wrapper.contacttop {
height: 325px;
}
.wrapper.contact {
margin-top: -60px;
}
	
.contact h2 {
padding-top: 5%;
}
    
.contact:before {
height: 0;
}
.contact .links {
padding-left: 5%;
vertical-align: top;
}
.wrapper.contactgrijs:after {
bottom: -65px;
}
.contactgrijs .formulier {
width: 87%;
}
.wpcf7 input, 
.wpcf7 textarea {
width: 100%
}
.smgeel .container {
padding-top: 25px;
}
.smgeel .icons {
padding-top: 40px;
}
    
/* --------------------------------------------
FOOTER
-------------------------------------------- */

footer .groen {
padding: 50px 20px;
}
footer .widget_text,
footer .WPSEO_Show_Address {
margin-bottom: 40px;
width: 50%;
}
footer .widget_text:last-child {
margin-bottom: 0;
}
    
}



























@media only screen and (min-width: 601px) and (max-width:800px ){

.container {
width: 90%;
}
iframe {
height: auto;
width: 100%;
}
    
/* --------------------------------------------
HEADER
-------------------------------------------- */

.home header:before {
top: -673px;
}
header .top .background {
height: 50px;
}
header .top .background:after {
top: -155px;
}
header .container {
top: -50px;
}
header .top {
    height: 65px;
    background-color: #fff;
}
.logo {
width: 40%;
}
#menu {
display: none;
}

/* --------------------------------------------
Wrapper / content
-------------------------------------------- */

.home .wrapper.wit:before {
left: -51px;
top: -40px;
}
.leesmeer {
display: none;
}

.slider a.button {
background-repeat: no-repeat;
background-size: 250px auto;
right: -26%;
top: 45%;
}
.slider a.button:hover {
background-repeat: no-repeat;
background-size: 250px auto;
}
    
.projecten .projects ul li {
margin-right: 0 !important;
width: 100% !important;
}
.projecten .projects {
padding-bottom: 5px;
}   
.filmpje iframe {
height: 280px;
}
.connect img,
.connect a {
display: none;
}
.connect .content {
background: #fff;
}
.connect .content {
margin-top: -20px;
padding-top: 20px;
position: relative;
}
.home .wrapper.groen:after {
bottom: -54px;
}
.groen .chpcs_image_carousel .chpcs_prev {
left: -45px;
}
.groen .chpcs_image_carousel .chpcs_next {
right: -45px;
}
.groen .stw .inhoud {
width: 50%;
}
.groen .caroufredsel_wrapper {
height: 400px !important;
}
.groen #wa_chpc_slider {
height: 400px !important;
}
#site .caroufredsel_wrapper {
height: 321px !important;
}
#wa_chpc_slider, 
.chpcs_foo_content {
min-height: 330px;
}
.groen .chpcs_img {
display: block !important;
}
.chpcs_image_carousel .chpcs_title, 
.chpcs_image_carousel .chpcs_foo_content p {
padding-left: 38%;
}
.groen .stw .inhoud {
padding: 0;
width: 40%;
}
.name-dropping .content {
padding: 0;
}
.name-dropping .content a {
width: 24%;
}
    
.wrapper.groen:after {
bottom: -53px;
}
    
/* -------------------
PORTFOLIO ARCHIVE
-------------------------------------------- */
    
.archive.projects-page .groen .widget_projects_categories {
bottom: 12px;
position: relative;
}
.archive.projects-page .groen .widget_projects_categories ul li:first-child {
padding-left: 0;
}
.portfolio .projects.columns-5 ul.projects li.project {
margin: 5px 1% 0 0 !important;
width: 49.5%;
}
.portfolio .projects.columns-5 ul.projects li.project:nth-child(2n) {
margin-right: 0 !important;
}
    
/* --------------------------------------------
UPDATE
-------------------------------------------- */

.subpage .container {
padding-left: 70px;
padding-right: 70px;
}
.update {
width: 45.8%;
}
.update h3 {
font-size: 20px;
}

/* --------------------------------------------
CONTACT
-------------------------------------------- */

.wrapper.contactgrijs:after {
bottom: -80px;
}
.wrapper.contacttop {
height: 500px;
}

.wrapper.contact {
margin-top: -106px;
}

.smgeel .container {
padding: 85px 0 32px;
}

.wrapper.smgeel .container:before {
height: 250px;
top: -19px;
}
.contact h2 {
padding-top: 5%;
}

/* --------------------------------------------
FOOTER
-------------------------------------------- */

footer .groen {
padding: 50px 20px;
}
footer .widget_text,
footer .WPSEO_Show_Address {
margin-bottom: 40px;
width: 50%;
}
footer .widget_text:last-child {
margin-bottom: 0;
}

}
























@media only screen and (min-width: 801px) and (max-width:1000px ){

.container,
.single-project .wrapper.portfolio {
width: 750px;
}
    
/* --------------------------------------------
TOP
-------------------------------------------- */

.home header:before {
top: -660px;
}
.logo {
width: 275px;
}
.home header .top:after {
width: 95%;
}

/* --------------------------------------------
Wrapper / content
-------------------------------------------- */

.slider a.button {
background-repeat: no-repeat;
background-size: 300px auto;
right: -15%;
top: 45%;
}
.slider a.button:hover {
background-repeat: no-repeat;
background-size: 300px auto;
}
    
.home .wrapper.wit:before {
top: -46px;
}
.home .wrapper.wit .leesmeer {
top: -56px;
}

.filmpje iframe {
height: 390px;
width: 100%;
}
.connect img {
height: 130px;
}
.connect .marie-cecile {
left: 16%;
}
.connect .tessa {
right: 200px;
top: -10px;
}
.projecten .projects {
padding-bottom: 20px;
}
.projecten .projects ul li {
width: 32.67% !important;
}
.groen .chpcs_image_carousel .chpcs_prev {
left: -45px;
}
.groen .chpcs_image_carousel .chpcs_next {
right: -45px;
}
.groen .stw .inhoud {
width: 52%;
}
.wrapper.groen:after,
.home .wrapper.groen:after {
bottom: -71px;
}
.name-dropping .content {
padding: 0 50px;
}
.name-dropping .content a {
width: 24%;
}

.chpcs_image_carousel .chpcs_title, 
.chpcs_image_carousel .chpcs_foo_content p {
padding-left: 28%;
}
    
.wrapper.groen {
padding-top: 165px;
}
    
/* -------------------
PORTFOLIO ARCHIVE
-------------------------------------------- */

.portfolio .projects.columns-5 ul.projects {
margin-top: -10px;
}
.portfolio .projects.columns-5 ul.projects li.project {
margin: 10px 1% 0 0 !important;
width: 32.5%;
}
.portfolio .projects.columns-5 ul.projects li.project:nth-child(3n) {
clear: none;
margin-right: 0 !important;
}
.portfolio .projects.columns-5 ul.projects li.project:nth-child(5n) {
margin-right: 1% !important;
}
 
/* -------------------
PORTFOLIO SINGLE
-------------------------------------------- */
    
.single-project .wrapper.portfolio {
padding: 80px 60px 0;
}
    
/* -------------------
PORTFOLIO UPDATE
-------------------------------------------- */
    
.subpage .container {
padding: 120px 60px 50px;
}
.update {
width: 47.2%;
}
    
/* -------------------
CONTACT
-------------------------------------------- */
    
.wrapper.contact {
margin-top: -185px;
}
.smgeel .container {
padding: 140px 0 32px;
}
.contact h2 {
padding-top: 5%;
}
    
/* --------------------------------------------
FOOTER
-------------------------------------------- */

footer .groen {
padding: 50px 0;
}

}

























@media only screen and (min-width: 1001px) and (max-width:1150px ){

#menu {
margin-left: -35px;
}

.home header:before {
top: -653px;
}
.slider a.button {
background-repeat: no-repeat;
background-size: 350px auto;
right: -5%;
top: 53%;
}
.slider a.button:hover {
background-repeat: no-repeat;
background-size: 350px auto;
}
.home .wrapper.wit:before {
top: -55px;
}
.filmpje iframe {
width: 100%;
}
.wrapper.groen:after {
bottom: -88px;
}
.home .wrapper.wit .leesmeer {
top: -85px;
}
.connect img {
height: 160px;
}
.connect .marie-cecile {
left: 21.3%;
}
.connect .tessa {
right: 294px;
} 
.home .wrapper.groen:after {
bottom: -88px;
}
.smgeel .container {
padding-top: 140px;
}
.contact h2 {
padding-top: 5%;
}

}


@media only screen and (min-width: 1001px) and (max-width:1100px ){

.home .wrapper.groen .container {
padding: 0 85px;
}
.contact h2 {
padding-top: 5%;
}
    
}




@media only screen and (min-width: 1151px) and (max-width:1400px ){

.home header:before {
top: -649px;
}
.slider a.button {
background-repeat: no-repeat;
background-size: 350px auto;
right: -5%;
top: 53%;
}
.slider a.button:hover {
background-repeat: no-repeat;
background-size: 350px auto;
}
.home .wrapper.wit .leesmeer {
top: -74px;
}
.home .wrapper.wit:before {
top: -63px;
}
.connect img {
height: 200px;
}
.connect .marie-cecile {
left: 168px;
}
.connect .tessa {
right: 246px;
}
.home .wrapper.groen:after,
.wrapper.groen:after {
bottom: -100px;
}
.contact h2 {
padding-top: 5%;
}

}


@media only screen and (min-width: 1401px) and (max-width:1885px ){

.home header:before {
top: -640px;
}
.home .wrapper.wit:before {
top: -76px;
}    
.home .wrapper.wit .leesmeer {
top: -86px;
}
.home .wrapper.groen:after {
bottom: -123px;
}
.contact h2 {
padding-top: 5%;
}
    
}