/* 
 Theme Name: 	Dijkstra Grijpskerk
 Author: 		Klaas-Wytze, Kawee
 Author uri: 	https://www.kawee.nl
 Template: 		generatepress
 Version: 		1.0
*/

/*------------------------------------------------------------------------
## Common css
------------------------------------------------------------------------*/

.full-width-content .container.grid-container {
	padding: 0;
}
.page-template-default .container.grid-container {
	padding: 55px 0;
}
.page-header, .sidebar .widget, .site-main>* {
	margin-bottom: 0;
}
body.home .container.grid-container,
body.single-loonwerk .container.grid-container,
body.page-template-tpl-contact .container.grid-container,
body.page-template-tpl-loonwerk .container.grid-container,
body.page-template-tpl-flexible-content .container.grid-container {
	padding: 0;
	max-width: 100%;
}
.separate-containers .site-main {
	margin: 0;
}

/*------------------------------------------------------------------------
## Fonts
------------------------------------------------------------------------*/

body {font-family: 'Overpass', sans-serif; overflow-x: hidden; background-color: #FFF;}

p, ul li, ol li {font-weight: 300; line-height: 190%; color: #2A2E26; font-size: 17px;}
p {margin-bottom: 15px;}
b, strong {font-weight: 600 !important;}

h1, h2, h3 {font-family: 'Overpass', sans-serif; font-style: normal; line-height: 115%; color: #0D0D0D;}
h1 {font-size: 39px; margin: 0 0 15px 0; font-weight: 800;}
h2 {font-size: 35px; margin: 0 0 15px 0; font-weight: 700;}
h3 {font-size: 28px; margin: 0 0 10px 0; font-weight: 700;}

h1:after {content: ""; display: block; height: 3px; width: 70px; background: #77BD84; margin: 25px 0;}
h2:after {content: ""; display: block; height: 3px; width: 70px; background: #77BD84; margin: 25px 0;}
.text-center h2:after {margin: 25px auto;}

.text-white p, .text-white h1, .text-white h2, .text-white h3, .text-white h4 {color: #FFF;}

a {color: #41ad66; text-decoration: underline;}
a:hover {color: #41ad66; text-decoration: none;}

/*------------------------------------------------------------------------
## Forms
------------------------------------------------------------------------*/

.form--box {
	padding: 35px;
	background: #77BD84;
}
.form--box h2 {
	text-align: center;
}
.form--box h2:after {
	margin: 25px auto;
	background: #41ad66;
}
.form--box p.form-description {
	text-align: center;
}
.wpcf7 .screen-reader-response {
	display: none;
}
.wpcf7 h4 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 5px;
}

input.wpcf7-form-control.wpcf7-text,
input.wpcf7-form-control.wpcf7-number,
textarea.wpcf7-form-control.wpcf7-textarea {
	font-weight: 600;	
	width: 100%;
	background: #77bd84;
	border-radius: 0px;
	color: #FFF !important;
	border-color: #FFF;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
    padding: 20px 15px;	
}
.wpcf7-form-control .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form p.fancy {
	font-size: 17px;
	position: relative;
}
.wpcf7-form p.fancy label {	
	position: absolute;
    top: 10px;
    left: 15px;
	pointer-events: none;
	font-weight: 400;
	transition: top .2s;
	color: #FFF;
	z-index: 1;
}
.wpcf7-form p.fancy label.has-value {
	top: -5px;
	left: 9px;
	display: inline-block;
	background: #77bd84;
	padding: 0 5px;
	font-size: 13px;
	line-height: normal;
}
.wpcf7-form p.default {
	position: relative;
}
.wpcf7-form p.default label {
	position: absolute;	
	display: inline-block;	
	font-weight: 700;
	color: #0D0D0D;
	top: -5px;
	left: 9px;
	background: #fff;
	padding: 0 5px;
	font-size: 13px;
	line-height: normal;
	z-index: 1;	
}
input.wpcf7-form-control.wpcf7-text:focus, 
input.wpcf7-form-control.wpcf7-number:focus, 
textarea.wpcf7-form-control.wpcf7-textarea:focus {
	border-color: #41AD66;
}
input.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    font-weight: 700;
    font-style: normal;
    font-size: 17px;
    line-height: initial;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    margin-top: 10px;
    margin-right: 8px;
    padding: 12px 30px 13px;
    background: #2A2E26;
    border-radius: 0;
    transition: all 0.2s ease;
}
input.wpcf7-form-control.wpcf7-submit:hover {
	color: #fff;
	text-decoration: none;
	background: #41AD66;
}
.wpcf7-form .wpcf7-acceptance input {
	margin-right: 5px;
}
.wpcf7-form .wpcf7-acceptance label {
    margin-bottom: 10px;
    font-style: 14px;
}
.wpcf7-form .wpcf7-acceptance a {
	text-decoration: underline;
	color: #FFF;
}
.wpcf7-form .wpcf7-acceptance a:hover {
	text-decoration: none;
}
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	width: 100%;
	padding-right: 35px;	
	background-image: url(assets/img/arrow_down-grey.svg);
	background-repeat: no-repeat;
	background-size: 20px 12px;
	background-position: calc(100% - 11px) 16px;
	background-color: #fff;
	border-radius: 2px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/*------------------------------------------------------------------------
## Buttons
------------------------------------------------------------------------*/

a.button {
	display: inline-block;
	font-weight: 700;
	font-style: normal;
	font-size: 17px;
	line-height: initial;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.8px;
	color: #fff;
	margin-top: 10px;
	margin-right: 8px;
	padding: 12px 30px 13px;
	background: #41AD66;
	border-radius: 0;
	transition: all 0.2s ease;      
}
a.button .button-text {
    font-weight: 700;
}
a.button:hover,
a.button:focus,
a.button:active {
	color: #fff;
	text-decoration: none;
	background: #77BD84;
}

a.button.button-outline {
	color: #0e0e0e;
	padding: 11px 25px;
	background: transparent;
	border: 1px solid #0e0e0e;
}
a.button.button-outline:hover {
	background: #0e0e0e;
	color: #fff;
}

a.button.button-outline-white {
	color: #fff;
	padding: 11px 25px;
	background: transparent;
	border: 1px solid #fff;
}
a.button.button-outline-white:hover {
	background: #fff;
	color: #0e0e0e;
}


a.button.button-small {
	font-size: 18px;
	padding: 8px 25px 7px;
}
a.button.button-outline.button-small {
	padding: 8px 21px 7px;	
}

a.button.button-link {
	font-size: 18px;
	color: #0D0D0D;
	padding: 0;
	background: inherit;
	border: 0;
}
a.button.button-link:after {
	content: url(assets/img/arrow_left.svg);
	display: inline-block;
	position: relative;
	font-size: 14px;
	margin: 4px 0 0 10px;
	left: 0;
	transition: left 0.3s ease;  
}
a.button.button-link:hover {
	color: #CC6815;
	text-decoration: none;
}
a.button.button-link:hover:after {
	left: 4px;
}

/*------------------------------------------------------------------------
## header
------------------------------------------------------------------------*/

.site-header {
    position: absolute;
    width: 100%;
    background: transparent;
    background-image: -moz-linear-gradient( -90deg, rgba(32, 30, 31, 0.95) 3%, rgba(32,30,31,0.3) 80%, rgba(32,30,31,0) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgba(32, 30, 31, 0.95) 3%, rgba(32,30,31,0.3) 80%, rgba(32,30,31,0) 100%);
    background-image: -ms-linear-gradient( -90deg, rgba(32, 30, 31, 0.95) 3%, rgba(32,30,31,0.3) 80%, rgba(32,30,31,0) 100%);
    z-index: 10;
}
.site-header .inside-header {
	justify-content: space-between;
}
.nav-float-right #site-navigation {
	margin-left: 30px;
}
body .navigation-branding img, body .site-logo.mobile-header-logo img {
	display: inline-block;
	margin: 0;
}

/* == menu == */

.main-navigation, .main-navigation ul ul {
	background: transparent;
}
.main-navigation .main-nav ul li a, 
.main-navigation .menu-toggle {
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFFFFF;
	background: transparent;
}
.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
	color: #FFFFFF;
	background-color: transparent;
}
.main-navigation .main-nav ul li:after {
	content: "";
	display: block;
	position: relative;
	margin: -6px auto;
	height: 2px;
	width: 0;
	background: #77BD84;
	opacity: 0;
	transition: all 0.4s ease;	
}
.main-navigation .main-nav ul li:hover:after,
.main-navigation .main-nav ul li[class*="current-menu-"]:after {
	width: 30px;
	opacity: 1;
}
    
/* == mobile menu == */

.main-navigation .menu-toggle {
	padding: 0;
}
button.menu-toggle:hover,
button.menu-toggle:focus {
	color: #ffffff;
}
.main-navigation.toggled .main-nav ul li {
	position: relative;
}
.menu-toggle .gp-icon svg {
	height: 30px;
	width: 30px;
}

/*------------------------------------------------------------------------
## footer callout (bijschrift)
------------------------------------------------------------------------*/

section.section--cta {
	background: #77BD84;
	padding: 0 0 55px;
	margin-top: 75px;
	text-align: center;
}
section.section--cta:before {
	content: "";
	background: #77bd84;
	width: 100%;
	height: 130px;
	position: absolute;
	left: 0;
	top: -50px;
	transform: skewY(-2.5deg);
	z-index: -1;
}
section.section--cta h3 {
	color: #FFF;
}
section.section--cta h3:after {
	content: "";
	display: block;
	height: 3px;
	width: 70px;
	background: #FFF;
	margin: 25px auto;
}
ul.cta--contact-items {
	list-style: none;
	margin: 0;
}
ul.cta--contact-items li {
	display: inline-block;
	margin: 0 20px;
}
ul.cta--contact-items li a {
	display: flex;
	align-items: center;	
	font-size: 18px;
	font-weight: 700;
	color: #FFF;
	letter-spacing: 1px;
}
ul.cta--contact-items li a:hover {
	text-decoration: underline;
}
ul.cta--contact-items li img {
	margin-right: 20px;
}

.contact-info-additinoal {
	box-shadow: rgb(0 0 0 / 25%) 0 2px 20px;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	padding: 35px 20px;
}
.contact-info-additinoal h4.contact-info-additinoal--heading {
	font-weight: 700;
	font-size: 20px;
	margin: 0;
}
/*------------------------------------------------------------------------
## footer
------------------------------------------------------------------------*/

.site-footer {
	background: #2A2E26;
}

/* ==  footer widgets == */

.footer-widgets {
	background: transparent;
}
.footer-widgets .inside-footer-widgets {
	text-align: center;
}
ul#menu-footer {
	list-style: none;
}
ul#menu-footer li {
	display: inline-block;
	margin: 0 20px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFFFFF;
	background: transparent;	
}
ul#menu-footer li a {
	color: #FFF;
	text-decoration: none;
}
ul#menu-footer li a:hover {
	color: #77BD84;
}
.footer-widgets .social-icons a {
	margin: 0 5px;
}


/* ==  footer bottom  == */

.site-info {
	background: transparent;
	color: #FFF;
	text-align: center;
}
.inside-site-info {
	font-size: 14px;
}
.site-info a {
	color: #FFF;
	text-decoration: underline;
	margin-left: 20px;
}
.site-info a:hover {
	color: #FFF;
	text-decoration: none;
}

/*------------------------------------------------------------------------
## Sections
------------------------------------------------------------------------*/

/* == common == */
section {
	position: relative;
	padding: 55px 0;
}
.section--beige-bg {
	background: #F4EDE5;
}
#main section.section--beige-bg {
	margin-top: 55px;
}
#main .inside-article {
	padding: 0px;
}

/* == banner == */

.banner {
	overflow: hidden;
}
.banner .banner-text-bottom {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 0 30px 70px;
}
.banner .banner-text-bottom:before {
	content: "";
	background: rgb(42 46 38 / 60%);
	width: 100vw;
	height: calc(100% + 150px);
	position: absolute;
	left: 0;
	top: -30px;
	transform: skewY(2.5deg);
}
.banner h1 {
	margin-bottom: 0;
	color: #fff;
}
.banner p {
	font-size: 17px;
	color: #fff;
}
.banner span.banner-subtitle {
	font-size: 20px;
	font-weight: 600;
	color: #FFF;
}
.banner.banner-page {
	background-size: cover;
	background-position: center center;
	min-height: 540px;
}
.banner.banner-page .banner-text-bottom {
	padding: 10px 30px 55px;
}

/* == page header == */
header.entry-header.page-header {
	background: #2a2e25;
	padding: 180px 0 40px;
}
header.entry-header.page-header h1 {
	margin-bottom: 0;
	color: #fff;
}
header.entry-header.page-header p {
	font-size: 17px;
	color: #fff;
    max-width: 455px;
}

/* == cards == */
.loonwerk-card {
	position: relative;
	padding: 20px;
}
.loonwerk-card.col-md-4 {
	overflow: hidden;
}
.loonwerk-card a {
	display: block;
	overflow: hidden;	
	box-shadow: rgb(0 0 0 / 25%) 0 2px 20px;
	width: 100%;
}
.loonwerk-card a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.4s ease;
}
.loonwerk-card a:hover img {
	transform: scale(1.07);
}
.loonwerk-card .overlay-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    padding: 25px 20px;    
    z-index: 1;
}
.loonwerk-card .overlay-content:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100px;
	width: 100%;
	background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	z-index: -1;
}
.loonwerk-card .overlay-content h3 {
	color: #fff;
	font-size: 22px;
	margin: 0;
}
.loonwerk--slider-nav .prev {
	left: 0;
}
.loonwerk--slider-nav .next {
	right: 0;
}
.loonwerk--slider-nav .prev,
.loonwerk--slider-nav .next {
	position: absolute;
	background: #41AD66;
	top: 50%;
	height: 50px;
	width: 50px;
	text-align: center;
	line-height: 60px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.loonwerk--slider-nav .prev:hover,
.loonwerk--slider-nav .next:hover {
	background: #77BD84;
}

/* == intro == */
section.section--intro-bg {
	overflow: hidden;
	padding-bottom: 120px;
}
section.section--intro-bg:before {
	content: "";
	background: #2A2E26;
	width: 100vw;
	height: calc(100% + 100px);
	position: absolute;
	top: -150px;
	transform: skewY(-2.5deg);
	z-index: -1;
}

/* == overflow images == */
.col--left-full-overflow-images img,
.col--right-full-overflow-images img {
	box-shadow: 0 2px 20px rgb(42 46 38 / 25%);
}
img.oveflow-images--bgimage {
	position: absolute;
	width: 48%;
}
img.oveflow-images--frimage {
	position: absolute;
	right: 30px;
	bottom: 10%;
	width: 70%;
	z-index: 2;
}

/* == col with image == */
.shadow-dijkstra img {
	display: block;
	box-shadow: 0 2px 20px rgb(42 46 38 / 25%);	
}

/*------------------------------------------------------------------------
## Pages and post templates
------------------------------------------------------------------------*/

/* == home == */
section.banner.banner-home {
	/*min-height: calc(100vh + 100px);*/
	min-height: 100vh;
	padding-top: 230px;
	background-size: cover;
}
span.banner-subtext {
	font-weight: 600;
	font-size: 25px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
}
body.home section.section--intro-bg {
	padding-bottom: 120px;
}
body.home section.section--intro-bg:before {
	height: 90%;
}

/* == loonwerk detail == */
.banner.banner-page.banner-loonwerk {
	padding: 0;
	min-height: auto;
}
.banner-loonwerk--slider .slick-slide {
	max-width: 90vw;
}
.banner-loonwerk--slider .slick-slide img {
	display: block !important;
	object-fit: cover;
	width: 100%;
	height: 960px;
}

/* == contact == */
section.section--contact-iconen .container > div {
	justify-content: space-around;
	max-width: 800px;
	margin: 0 auto;
}
.contact-icon--box:not(:last-child) {
	margin-bottom: 15px;
}
.contact-icon--box {
	text-align: center;
}
.contact-icon--box .contact-icon--description {
	display: block;
	font-size: 15px;
}
.contact-icon--box h3.contact-icon--title {
	font-size: 19px;
	margin-bottom: 0px;
}
.contact-icon--box h3.contact-icon--title a {
	color: #FFF;
	text-decoration: none;
}
.contact-icon--box h3.contact-icon--title a:hover {
	text-decoration: underline;
}
body.page-template-tpl-contact .form--box:before {
	content: "";
	background: #77bd84;
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	top: -20px;
	transform: skewY(-2.5deg);
	z-index: -1;
}
.back-to-button a.button:before {
	content: url(assets/img/angle-left.svg);
	display: inline-block;
	position: relative;
	margin-right: 12px;
	top: 5px;
}

/*------------------------------------------------------------------------
## desktop
------------------------------------------------------------------------*/

@media screen and ( min-width : 768px ) {
		
	
	/* ==  sections == */
	/* right image full */
	.col--right-full-overflow-images {
		position: absolute;
		width: 48vw;
		right: 0;
		top: 0;
	}
	/* left image full */
	.col--left-full-overflow-images {
		position: absolute;
		width: 48vw;
		left: 0;
		top: 0;
	}
	
}

/*------------------------------------------------------------------------
## mobile
------------------------------------------------------------------------*/


@media screen and ( max-width : 1199px ) {
	
	/* == footer == */
	.footer-widgets-container.grid-container,
	.site-info .inside-site-info {
		max-width: 90%;
	}
	
}
@media screen and ( max-width : 991px ) {
	/* == home == */
	.loonwerk-cards--slider .loonwerk-card a img {
		width: calc( 50vw - 40px);
	}
}
@media screen and ( max-width : 767px ) {

	/* lettertype's */
	h1 {font-size: 27px;}
	h2 {font-size: 20px;}
	h3 {font-size: 18px;}
	h4 {font-size: 16px;}
	h5 {font-size: 16px;}
		
	h1:after {margin: 20px 0;}
	h2:after {margin: 20px 0;}
	.text-center h2:after {margin: 20px auto;}
	
	/* == mobile menu == */
	.nav-float-right #site-navigation {
		margin-left: 0px;
	}
	.has-inline-mobile-toggle #site-navigation.toggled {
		background: #2a2e25;
	}
	.main-navigation .main-nav ul li:after {
		display: none;
	}
	.main-navigation .main-nav ul li > a:hover,
	.main-navigation .main-nav ul li[class*="current-menu-"] > a {
		color: #41ad66;
	}
	/* == formulieren == */
	.form--box {
		padding: 20px;
		margin: 0 15px;
		z-index: 1;
	}
	/* === footer == */
	.site-info .inside-site-info {
		display: grid;
	}
	.site-info .inside-site-info > div {
		padding: 7px 0;
	}
	ul#menu-footer li {
		display: block;
	}
	/* == sections == */
	section {
		padding: 40px 0;
	}
	section.banner.banner-page {
		padding-top: 250px;
		padding-bottom: 0;
		min-height: auto;
	}
	.banner .banner-text-bottom {
		position: relative;
		padding: 0 5%;
	}
	.banner.banner-page .banner-text-bottom {
		padding: 0 5% 20px;
	}
	section.banner span.banner-subtext {
		font-size: 15px;
	}
	.banner p {
		font-size: 15px;
	}
	.banner span.banner-subtitle {
		font-size: 17px;
	}		
	header.entry-header.page-header {
		padding: 150px 0 40px;
	}
	section .col--text-left {		
		order: 1;
	}
	/*  cta  */
	ul.cta--contact-items li img {
		transform: scale(.75);
		margin-right: 5px;
	}	
	ul.cta--contact-items li a {
		font-size: 15px;
	}
	/* == home == */
	section.banner.banner-home {
		min-height: auto;
	}
	body.home section.section--intro-bg {
		padding-bottom: 0;
	}
	body.home section.section--intro-bg:before {
		height: 100%;
	}
	.loonwerk--slider-nav .prev, .loonwerk--slider-nav .next {
		top: inherit;
		bottom: 100px;
	}
	.loonwerk--slider-nav .prev, .loonwerk--slider-nav .next {
		top: inherit;
		bottom: 100px;
		transform: scale(0.8);
	}
	.loonwerk--slider-nav .prev {
		transform-origin: left;
	}
	.loonwerk--slider-nav .next {
		transform-origin: right;
	}	
	.col--right-full-overflow-images {
		position: relative;
		width: 100%;
		margin: 35px 5% 0;
	}
	.section--full-overflow-images .row {
		height: inherit !important;
	}
	/* == loonwerk == */
	.banner.banner-loonwerk .banner-text-bottom {
		position: absolute;
	}	
	.banner-loonwerk--slider .slick-slide {
		max-width: 100vw;
	}
	.banner-loonwerk--slider .slick-slide img {
		height: 450px;
	}
	.banner-loonwerk .loonwerk--slider-nav .prev,
	.banner-loonwerk .loonwerk--slider-nav .next {
		bottom: 170px;
	}

}
@media only screen and (max-width: 480px) {
	
	/* == header == */
	.site-header .inside-header {
		padding: 15px 20px;
	}
	/* == home == */
	.loonwerk-cards--slider .loonwerk-card a img {
		width: calc( 100vw - 40px);
	}	
	/* == loonwerk == */
	.banner-loonwerk--slider .slick-slide img {
		height: 375px;
	}	
}