.site-banner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	background-color: var(--yellow);
}

.site-banner .content-banner {
	max-width: 100%;
}

/* content btn banner primary */
.site-banner .btn-banner-primary {
	display: inline-block;
	position: relative;
	padding: var(--padding-button);
	background-color: var(--green);
	border: 2px solid var(--green);
	-webkit-border-radius: var(--rounded-2xl);
	   -moz-border-radius: var(--rounded-2xl);
	        border-radius: var(--rounded-2xl);
	color: var(--white);
	font-size: var(--text-md);
	font-weight: 700;
}

.site-banner .btn-banner-primary:after {
	position: absolute;
	display: inline-block;
	content: '';
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
			-webkit-transition: var(--duration);
			-o-transition: var(--duration);
			-moz-transition: var(--duration);
			transition: var(--duration);
	background: var(--transparent) url(../icons/arrow-right-small-white.svg) center/cover no-repeat;
}

.site-banner .btn-banner-primary:hover,
.site-banner .btn-banner-primary:active,
.site-banner .btn-banner-primary:focus {
	-webkit-box-shadow: var(--shadow-second);
	   -moz-box-shadow: var(--shadow-second);
	        box-shadow: var(--shadow-second);
}

.site-banner .btn-banner-primary:hover:after {
	-webkit-transform: translate(3px,-50%);
	   -moz-transform: translate(3px,-50%);
	    -ms-transform: translate(3px,-50%);
	     -o-transform: translate(3px,-50%);
	        transform: translate(3px,-50%);
}

.site-banner .btn-banner-primary:focus {
	background-color: var(--green-200);
	border-color: var(--green-200);
}

.site-banner:not(.type-banner--banner-custom-typing) {
	padding-left: var(--padding-container);
	padding-right: var(--padding-container);
}

/* styling type-banner--banner-simple --------------------*/
.site-banner.type-banner--banner-simple {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.site-banner.type-banner--banner-simple .content-banner {
	text-align: center;
	max-width: 954px;
}

.site-banner.type-banner--banner-simple .content-banner h1,
.site-banner.type-banner--banner-simple .content-banner h2 {
	margin-bottom: 12px;
}

.site-banner.type-banner--banner-simple .content-banner p {
	font-size: var(--text-base);
}

.site-banner.type-banner--banner-simple.custom-small-text-banner p {
	font-size: var(--text-base);
}


/* styling  type-banner--banner-custom-typing -----------------*/
.site-banner.type-banner--banner-custom-typing {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.site-banner.type-banner--banner-custom-typing h1 {
	text-align: center;
}

.site-banner.type-banner--banner-custom-typing .button-group-banner {
	position: relative;
	z-index: 2;
	max-width: -webkit-calc(835px + 60px);
	max-width: -moz-calc(835px + 60px);
	max-width: calc(835px + 60px);
}

.site-banner.type-banner--banner-custom-typing h1:last-child {
	margin-bottom: 0;
}

.site-banner.type-banner--banner-custom-typing .content-banner {
	max-width: -webkit-calc(835px + 60px);
	max-width: -moz-calc(835px + 60px);
	max-width: calc(835px + 60px);
	position: relative;
	z-index: 1;
}

.site-banner.type-banner--banner-custom-typing .media-banner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	max-width: 635px;
	position: relative;
}

.site-banner.type-banner--banner-custom-typing .wh-typing-text-wrapper {
	--height-icon-line: 32px;
	position: absolute;
	width: 300px;
}

.site-banner.type-banner--banner-custom-typing .wh-text--wrapper {
	margin-left: -12px;
}


/* styling type-banner--banner-content-image */
.site-banner.type-banner--banner-content-image {
	padding-top: 24px;
}

.site-banner.type-banner--banner-content-image .content-banner-wrapper p:nth-child(2) {
	font-size: var(--text-base);
	margin-bottom: 22px;
}

.site-banner.type-banner--banner-content-image .media-banner {
	overflow: hidden;
	border: 1.5px solid var(--black);
	-webkit-border-radius: var(--rounded-xl);
	   -moz-border-radius: var(--rounded-xl);
	        border-radius: var(--rounded-xl);
}

.site-banner.type-banner--banner-content-image .media-banner img {
	width: 100%;
	height: 100%;
}

/* styling banner service */
.site-banner.banner-service {
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	   -moz-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.site-banner.banner-service .content-banner {
	text-align: left;
}

.site-banner.banner-service .content-banner p {
	--text-lg: var(--text-base);
}

/* banner diensten */
.site-banner.type-banner--banner-simple.banner-diensten h1 {
	margin-bottom: 8px;
}

/* -----------------------------------------
		STYLING RESPONSIVE
--------------------------------------------*/
@media all and (min-width: 601px) {
	.site-banner .btn-banner-primary:after {
		width: 18px;
		height: 17px;
		right: 32px;
	}

	.site-banner .btn-banner-primary {
		padding-right: 66px;
	}
	
	.site-banner .button-group-banner {
		margin-top: 26px;
	}
}


@media all and (min-width: 901px) {
	.site-banner.banner-size-medium {
		min-height: 400px;
	}

	/* styling banner typing */
	.site-banner.type-banner--banner-custom-typing {
		padding-top: 73px;
	}

	.site-banner.type-banner--banner-custom-typing .btn-banner-primary {
		margin-right: 9%;
	}

	/* styling banner general */
	.site-banner:not(.type-banner--banner-custom-typing):not(.type-banner--banner-content-image) {
		padding-top: 48px;
		padding-bottom: 83px;
	}

	.site-banner.type-banner--banner-simple.banner-service .content-banner h1 {
		--text-4xl: 48px;
	}

	.site-banner.type-banner--banner-simple.custom-small-text-banner {
		padding-bottom: 93px;
	}

	/* styling type-banner--banner-content-image */
	.site-banner.type-banner--banner-content-image {
		-webkit-box-align: center;
		-webkit-align-items: center;
		   -moz-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	} 

	/* styling type-banner--banner-custom-typing */
	.site-banner.type-banner--banner-custom-typing {
		min-height: 740px;
		padding-left: var(--padding-container);
	}

	.site-banner.type-banner--banner-custom-typing .wh-typing-text-wrapper {
		bottom: 185px;
	}

	.site-banner.type-banner--banner-custom-typing .content-banner {
		padding-left: 60px;
	}

	.site-banner.type-banner--banner-custom-typing .content-banner-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		   -moz-box-orient: vertical;
		   -moz-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		   -moz-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
	}

	.site-banner.type-banner--banner-custom-typing .button-group-banner {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		   -moz-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
	}

	.site-banner.type-banner--banner-simple .content-banner h1,
	.site-banner.type-banner--banner-simple .content-banner h2 {
		--text-4xl: 44px;
	}

	/* styling type-banner--banner-content-image */
	.site-banner.type-banner--banner-content-image {
		padding-bottom: 96px;
	}

	.site-banner.type-banner--banner-custom-typing .wh-typing-text-wrapper {
		left: -webkit-calc(100% - 15px);
		left: -moz-calc(100% - 15px);
		left: calc(100% - 15px);
	}

	.site-banner.type-banner--banner-custom-typing h1 {
		--text-4xl: 104px;
	}

	.site-banner.type-banner--banner-custom-typing .media-banner {
		margin-top: -183px;
		margin-left: 1px;
		position: relative;
		z-index: 2;
	}

	/* .site-banner.type-banner--banner-custom-typing .content-banner {
		mix-blend-mode: difference;
		color: var(--white);
		background: var(--black);
	} */

}


@media all and (min-width: 901px) and (max-width: 1599px) {
	/* styling type-banner--banner-content-image */
	.site-banner.type-banner--banner-content-image .content-banner {
		width: 50%;
	}

	.site-banner.type-banner--banner-content-image .media-banner {
		width: 50%;
		margin-left: 80px;
	}
}


@media all and (min-width: 1600px) {
	/* styling type-banner--banner-content-image */
	.site-banner.type-banner--banner-content-image .content-banner {
		position: relative;
		width: 50%;
		margin-right: -19px;
	}

	.site-banner.type-banner--banner-content-image .media-banner {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		width: 57%;
		right: -135px;
		max-width: 596px;
	}
}

@media all and (max-width: 1299px) {
	.site-banner.type-banner--banner-custom-typing .content-banner {
		padding-left: var(--padding-container);
		padding-right: var(--padding-container);
	}
}

@media all and (min-width: 901px) and (max-width: 1299px) {
	.site-banner.type-banner--banner-custom-typing .media-banner {
		margin-left: -35px;
	}

	.site-banner.type-banner--banner-custom-typing {
		padding-right: var(--padding-container);
	}
}

@media all and (max-width: 900px) {
	/* styling banner custom typing */
	.site-banner.type-banner--banner-custom-typing {
		padding-top: 36px;
	}

	.site-banner.type-banner--banner-simple .content-banner h1,
	.site-banner.type-banner--banner-simple .content-banner h2 {
		--text-4xl: 32px;
	}

	.site-banner.type-banner--banner-simple .content-banner p {
		--text-lg: 16px;
	}

	.site-banner.type-banner--banner-simple {
		padding-top: 40px;
		padding-bottom: 40px;
	}


	.site-banner.type-banner--banner-custom-typing .line-arrow-typing {
		--icon-left-position: -30px;
	}

	.site-banner.type-banner--banner-custom-typing .media-banner {
		max-width: 70%;
    	margin-left: -23px;
		margin-top: 44px;
	}

	.button-group-banner {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		   -moz-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	/* styling type-banner--banner-content-image */
	.site-banner.type-banner--banner-content-image {
		padding-bottom: 60px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		   -moz-box-orient: vertical;
		   -moz-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.site-banner.type-banner--banner-content-image .media-banner {
		margin-top: 32px;
	}

	/* content btn banner primary */
	.site-banner .btn-banner-primary {
		--text-md: 12.873px;
	}

}

@media all and (min-width: 601px) and (max-width: 900px) {
	.site-banner.type-banner--banner-content-image .media-banner {
		max-height: 450px;
	}

	.site-banner.type-banner--banner-custom-typing h1 {
		--text-4xl: 64px;
	}

	.site-banner.type-banner--banner-custom-typing .wh-typing-text-wrapper {
		top: 16px;
		left: 61%;
	}

}


@media all and (max-width: 600px) {
	.site-banner.type-banner--banner-content-image .media-banner {
		height: 250px;
	}

	.site-banner .btn-banner-primary {
		--padding-button: 12px 16px;
		padding-right: 40.2px;
	}
	
	.site-banner .btn-banner-primary:after {
		width: 12.8px;
		height: 12px;
		right: 16px;
	}

	.site-banner .button-group-banner {
		margin-top: 12px;
	}
	
	.site-banner.type-banner--banner-custom-typing h1 {
		--text-4xl: 48px;
	}

	.site-banner.type-banner--banner-custom-typing .wh-typing-text-wrapper {
		bottom: 160px;
		--max-width-typing: 200px;
		left: -webkit-calc(100% - 90px);
		left: -moz-calc(100% - 90px);
		left: calc(100% - 90px);
	}


}