/*
Theme Name: Stabo bouw
Description: Wordpress thema Stabo Bouw
Version: 1.0 | 01042020
Author: Groeier!
Author URI: https://www.groeier.nl/
Template: stabo
*/

/* Import Montsserat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');

/* Slick voor projectslider */
@import url('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

h1,
h2,
h3 {
	text-transform: inherit !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
	font-size: 28px !important;
}
.quote h2 {
	font-size: 36px !important;
}

h4,
strong {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500 !important;
}
li {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300 !important;
	font-size: 16px;
}
h5,
p,
a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300 !important;
}
button:focus {
	outline:0;
}
.avia-button {
	-webkit-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	border: 0px !important;
}
.avia-button:hover {
    opacity: 1.0 !important;
}
.vacature_afbeelding: {
	margin-top: 50px;
}
.avia-button.avia-size-large:hover {
	background-color: white !important;
	color: #95c11f !important;
	border: 0px !important;
	-webkit-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.avia-menu-fx {
	display: none !important;
}
.av-special-heading {
	margin-top: 0px !important;
}
.avia-section {
	min-height: 0px !important;
}
.avia-image-container-inner, .avia_image, .av-image-caption-overlay {
	border-radius: 0px !important;
}
#top .avia-post-nav {
	display: none !important;
}
.avia-video, .avia-video iframe, .avia-video video {
    background-color: transparent !important;
}
#heateor_sss_sharing-2 h3 {
	display: none !important;
}
.sub-menu {
	border: 0px !important;
}
.sub-menu:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
    height: 4px;
    background: url(https://www.stabobouw.nl/wp-content/uploads/2020/04/patroon_stabo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.av-main-nav ul a {
	font-size: 14px !important;
}
.border:after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 50%;         /* <-- put left edge in the middle */
    margin-right: -20%; /* <-- shift to the left by half of the width */
    width: 0%;
    height: 8px;
    background: #95C11F;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.show-border .border:after {
	width: 40%;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.border:before {
	content: '';
    position: absolute;
    top: -8px;
    left: 50%;         /* <-- put left edge in the middle */
    margin-left: -20%; /* <-- shift to the left by half of the width */
    width: 0%;
    height: 8px;
    background: #95C11F;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.show-border .border:before {
	width: 40%;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}



.patroon {
	position: relative;
}
.patroon:before, .patroon:after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%; 
	transform: translate(-50%, -50%);
    width: 90%;
    height: 8px;
    background: url(https://www.stabobouw.nl/wp-content/uploads/2020/04/patroon_stabo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.patroon:after {
    top: inherit;
    bottom: -12px;
}


/* Header */
#header:after {
    content: '';
    position: absolute;
    bottom: -8px;
    width: 100%;
    height: 8px;
    background: url(https://www.stabobouw.nl/wp-content/uploads/2020/04/patroon_stabo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.av-main-nav > li > a {
	font-size: 18px !important;
}
span.logo {
	max-width: 150px !important;
}



/* Block menu */
#block_menu .content {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
#block_menu .avia-button-wrap {
	width: 49%;
	display: inline-block;
}
#block_menu .avia-button {
	color: #7E7E7D !important;
	padding: 90px 20px 30px 20px;
	border-radius: 0px !important;
	font-size: 18px !important;
}
#block_menu .avia-button:hover {
	color: #95C11F !important;
}
#block_menu .avia_button_background {
	display: none;
}
#block_menu span.avia_button_icon {
	position: absolute !important;
	top: 32%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 38px;
}

.playbutton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 50px;
}

.cta a {
	border-radius: 8px !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500 !important;
	font-size: 20px !important;
}

/* Overzicht vacatures */
.vacature {
	background: white;
	padding: 65px;
	margin-top: 30px;
}
.vacature strong {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
}
.vacature h3 {
	margin-bottom: 30px;
}
.vacature a {
	margin-top: 30px;
	background: #95C11F;
	color: white;
	border-radius: 8px;
	padding: 15px 30px 13px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500 !important;
}
.vacature a:hover {
	text-decoration: none;
	color: white;
}

/* Vacature pagina */
.single-vacature .informatie strong {
	font-weight: 700 !important;
}

/* Projecten pagina */
#projecten .container {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0px !important;
}
#projecten .template-page.content {
	padding-top: 0px !important;
}
#projecten .project {
	padding-top: 30px;
	padding-bottom: 20px;
}
#projecten .project:nth-child(odd) {
	background: #F0F0F0;
}
#projecten .afbeelding_project {
	position: relative;
	margin: 20px;
}
#projecten .rand_boven {
	height: 8px;
    background: #95C11F;
    width: 0%;
    margin: 0 auto;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten .rand_onder {
	height: 8px;
    background: #95C11F;
    width: 0%;
    margin: 0 auto;
	margin-top: -7px;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten .show-border .rand_boven {
	width: 50%;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten .show-border .rand_onder {
	width: 50%;
	-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten .details_project {
	padding: 30px;
	position: relative;
}
#projecten .project h2 {
	margin-bottom: 25px;
}
#projecten .project p.datum {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300 !important;
	font-size: 14px;
}
#projecten a.leesmeer {
	color: white;
	background-color: #95c11f;
	border-radius: 8px;
	padding: 10px 25px 10px;
	font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
    font-size: 16px !important;
	-webkit-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten a.leesmeer:hover {
	color: #95c11f;
	background-color: white;
	text-decoration: none;
	-webkit-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#projecten .share {
	position: absolute;
	right: 20px;
	bottom: 25px;
}

/* Project pagina */
.single-project .informatie h3 {
	color: #95C11F;
	font-size: 16px !important;
}

/* Nieuws pagina */
.avia-builder-widget-area .heateor_sss_sharing_container {
	position: absolute;
	right: 0px;
}

/* Slick slider */
.slider_project .slick-slide img {
	height: 200px;
	width: 100%;
	object-fit: cover;
}
.slider_thumbnails .slick-list {
	margin-top: 15px !important;
}
.slider_thumbnails .slick-slide {
	margin-right: 20px;
}
.slider_thumbnails .slick-slide:focus {
	outline: 0;
}
.slider_thumbnails .slick-slide:hover {
	cursor: pointer;
}
.slider_thumbnails .slick-slide img {
	height: 75px;
	width: 100%;
	object-fit: cover;
}
.slider_thumbnails button {
	font-size: 1px;
	color: white;
}
.slider_thumbnails button:hover {
	cursor: pointer;
}
.slider_thumbnails .slick-prev {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: white;
	position: absolute;
	top: -140px;
	left: -20px;
	border: 0px;
	box-shadow: 0 0 7px rgba(33,33,33,.2);
}
.slider_thumbnails .slick-prev:before {
	font-family: "entypo-fontello";
	content: "\e874";
	font-size: 32px;
	color: black;
	margin-right: -4px;
}
.slider_thumbnails .slick-next {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: white;
	position: absolute;
	top: -140px;
	right: -20px;
	border: 0px;
	box-shadow: 0 0 7px rgba(33,33,33,.2);
}
.slider_thumbnails .slick-next:before {
	font-family: "entypo-fontello";
	content: "\e875";
	font-size: 32px;
	color: black;
	margin-right: -4px;
}

/* Contact */
.gform_wrapper div.validation_error {
	color: #e20613 !important;
	border: 0px !important;
	text-align: left !important;
	font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
}
.gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
	background-color: white !important;
	margin-bottom: 0px !important;
	border: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message {
	color: #e20613 !important;
}
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
	padding: 10px;
    border-radius: 8px;
	font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
}
.gform_footer {
	text-align: center;
}
.gform_button, .vacature_button a {
	border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
    font-size: 20px !important;
	background-color: #95C11F !important;
}

/* Footer */
#footer {
	position: relative;
}
#footer:before {
    content: '';
    position: absolute;
	left: 50%; 
	transform: translate(-50%, -50%);
    top: -4px;
    width: 90%;
    height: 8px;
    background: url(https://www.stabobouw.nl/wp-content/uploads/2020/04/patroon_stabo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
#footer .avia-image-container {
	max-width: 200px;
	margin-bottom: 50px;
}
#footer strong {
	font-weight: 700 !important;
}

#footer .contactgegevens ul {
	list-style-type: none;
	margin-left: -5px;
}
#footer .contactgegevens li {
	display: inline;
}
#footer .contactgegevens li img {
	max-width: 100px;
}
#footer .contactgegevens li img.social {
	max-width: 35px;
}

#socket .content {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
#socket ul {
	list-style-type: none;
	margin-left: -15px;
	margin-bottom: 0px !important;
}
#socket li {
	margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
#vacaturetekst h2 {
	font-size:30px!important;
}
	
	
	h1,
	h2,
	h3 {
		font-size: 34px !important;
	}	
	
	.quote h2 {
		font-size: 42px !important;
	}
	
	/* Header */
	span.logo {
		max-width: 250px !important;
		top: 25px;
	}
	.sub-menu {
		margin-top: -25px !important;
	}
	
	/* Block menu */
	#block_menu .avia-button-wrap {
		width: 24%;
	}
	#block_menu .avia-button:hover:before,
	#block_menu .avia-button:hover:after {
		content: '';
		position: absolute;
		top: -6px;
		left: 0%;
		width: 100%;
		height: 6px;
		background: #95C11F;
	}
	#block_menu .avia-button:hover:after {
		top: inherit;
		bottom: -6px;
	}
	
	/* Projecten pagina */
	#projecten .project h2 {
		margin-top: 25px;
	}
	
	#projecten .share {
		right: 45px;
		bottom: 40px;
	}
	
	/* Projectpagina */
	/* Slick slider */
	.slider_project .slick-slide img {
		height: 500px;
	}
	.slider_thumbnails .slick-slide {
		margin-right: 10px;
	}
	.slider_thumbnails .slick-slide img {
		height: 100px;
	}
	.slider_thumbnails .slick-prev {
		top: -300px;
	}
	.slider_thumbnails .slick-next {
		top: -300px;
	}
	
	#footer .av_textblock_section {
		width: 49%;
		display: inline-block;
		vertical-align: top;
	}
	#socket .avia_textblock {
		text-align: center;
	}
	#socket ul li {
		display: inline;
		border-right: 1px solid #707070;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-right: 20px;
	}
	#socket ul li:last-child {
		border: 0px !important;
	}
}

@media screen and (min-width: 1024px) {
#vacaturetekst h2 {
	font-size:30px!important;
}
	
	h1,
	h2,
	h3 {
		font-size: 38px !important;
	}

#vacaturetekst h2 {
	font-size:30px!important;
}	
	
	.quote h2 {
		font-size: 52px !important;
	}
	.playbutton {
		max-width: 85px;
	}
	
	/* Projecten pagina */
	#projecten .content {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
	#projecten .rij_project {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 50px;
	}
	#projecten .project {
		padding-top: 50px;
		padding-bottom: 65px;
	}
	#projecten .kolom {
		display: flex;
        flex-direction: row;
	}
	#projecten .project:nth-child(odd) .kolom:nth-child(1) {
		order: 2;
	}
	#projecten .project:nth-child(odd) .kolom:nth-child(2) {
		order: 1;
		padding-left: 0px !important;
		padding-right: 75px !important;
	}
	#projecten .afbeelding_project {
		width: 50%;
		margin-right: 2%;
		position: relative;
	}
	#projecten .project .afbeelding {
		height: 400px;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#projecten .rand_onder {
		margin-top: 0px;
	}
	#projecten .project img {
		height: 100%;
		object-fit: cover;
	}
	#projecten .details_project {
		width: 48%;
		padding: 50px;
		flex: 2;
	}
	#projecten .share {
		right: 75px;
		bottom: 45px;
	}
	
	/* Projectpagina */
	/* Slick slider */
	.slider_project .slick-slide img {
		height: 400px;
	}
	.slider_thumbnails .slick-prev {
		top: -235px;
	}
	.slider_thumbnails .slick-next {
		top: -235px;
	}
	
	#footer .av_textblock_section {
		width: 33%;
	}
}

@media screen and (min-width: 1310px) {
	/* Projecten pagina */
	#projecten .rij_project {
		max-width: 1310px;
		margin: auto;
	}
	
	/* Projectpagina */
	/* Slick slider */
	.slider_project .slick-slide img {
		height: 600px;
	}
	.slider_thumbnails .slick-prev {
		top: -340px;
	}
	.slider_thumbnails .slick-next {
		top: -340px;
	}
	.small .container {
		max-width: 1110px !important;	
	}
	.patroon:before, .patroon:after {
		width: 1310px;
	}
	#footer:before {
		width: 1310px;
	}
	#footer .av_textblock_section {
		width: 24.5%;
		display: inline-block;
	}	
}

@media screen and (max-width: 767px) {
	.swap .flex_column_table,
  	.swap .entry-content-wrapper {
		display: flex !important;
		flex-direction: column-reverse;
  	}
	
	#block_menu .container {
		max-width: 100% !important;
		width: 100% !important;
		padding: 0px !important;
	}
	
	/* Overzicht vacatures */
	.vacature {
		padding: 25px;
	}
	
	#footer .av_textblock_section {
		margin-top: 40px;
	}
}

@media screen and (max-width: 989px) {
.swap_tablet .flex_column_table,
 .swap_tablet .entry-content-wrapper {
		display: flex !important;
		flex-direction: column-reverse;
  	}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
	
	span.logo {
		max-width: 150px !important;
		top: 40px !important;
	}
	
	.av_two_fifth {
		width: 70% !important;
	}
	.av_three_fifth {
		width: 30 !important;
	}
	
	.av-main-nav>li>a {
		font-size: 14px !important;
	}

}


/* Animaties */

/* Foto bij langs scrollen */
.foto_appear img {
    opacity: 0;
}
.foto_appear.come-in-left img {
	animation: color 0.5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.foto_appear.come-in-right img {
	animation: color 0.5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.foto_appear .avia-image-container-inner {
    overflow: hidden;
    position: relative;
}
.come-in-left .block {
    animation: reveal_left_to_right 1s ease-in-out;
    animation-fill-mode: forwards;
    background: #96c11f;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 10;
}
.come-in-right .block {
    animation: reveal_right_to_left 1s ease-in-out;
    animation-fill-mode: forwards;
    background: #96c11f;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 10;
}

/* Foto bij langs scrollen van projecten */
.project .image-wrap img {
    opacity: 0;
}
.project .image-wrap.come-in-left img {
	animation: color 0.5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.project .afbeelding .image-wrap {
    overflow: hidden;
    position: relative;
	height: 100%;
	text-align: center;
}

/* Keyframes */
@keyframes reveal_left_to_right {
    0% {
        transform: translateX(-100%);
    }
    
    50% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(100%);
    }
}

@keyframes reveal_right_to_left {
    0% {
        transform: translateX(100%);
    }
    
    50% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(-100%);
    }
}

@keyframes color {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

/*content omwisselen bij schalen*/

.bekijken {
	color:white!important;
	text-decoration:none!important;
}

.titel_solicitatie .av-subheading p {
	text-align:center!important;
}

@media only screen and (max-width: 768px) {
	#gform_submit_button_3 {
	font-size:15px!important;
	}
}

#menu-item-1206 > a > .avia-menu-text {
    background-color: #95C11F !important;
    padding: 10px;
    border-radius: 8px;
    color: white;
}