@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Raleway:wght@100;200;300;400;500;600;700&display=swap');
	
	@mainCol: #09254a;
	@secCol: #7aace0;
	@secColTrans: fade(@secCol, 40%);
	@bodyCol: rgba(37,37,37,0.6);
	@white: #fff;
	@whiteSixty: fade(@white, 60%);
	@background: #E3E6EC;
	@fontHead: 'Raleway', sans-serif;
	@fontBody: 'Poppins', sans-serif;
	
	/* Algemeen */
	body {font-family:@fontBody!important;}
	
	a{transition: color 400ms,background-color 400ms;}
	p{font-size: 16px; font-weight: 300; line-height: 26px; font-family:@fontBody; color:@bodyCol;}
	.btn{transition: all .15s ease-in-out;}
	
	.rowTop{
	background-color:fade(@mainCol, 100%);
	padding: 10px 0;
	position: relative;
	z-index: 100;
	.contact{
	margin-top: 14px;
	i{display:none;}
	.contact-telefoon, .contact-email{display:inline-block; margin-right:15px; }
	a{font-size: 12px; color:@whiteSixty; &:hover{color:@white}}
	}
	.btn{
	padding: 12px 35px;
	border: 1px solid @whiteSixty;
	color: @whiteSixty;
	background-color: transparent;
	font-size: 14px;
	border-radius: 3px;
	position: relative;
	z-index: 3;
	overflow: hidden;
	float:right;
	width:100%;
	&:hover{color:@white; background-color: @secCol; border-color:@whiteSixty; }
	}}
	
	.headerRow{
	height: 80px;
	left: 0;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 99;
	box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
	transition: 0.3s;
	background-color: transparent;
	border-bottom: 1px solid fade(@white, 30%);
	img{height: 60px; margin: 10px auto;}
	}
	.headerSticky{background:fade(@mainCol, 95%);}
	.headerRow img {padding: 5px;}
	.bannerRow{
		background: url("https://www.kozijnenarnhem.nl/lp/resources/images/kozijnenarnhem.nl/bennis-arnhem-gevelelementen-puien-particulieren.jpg");
		/*background-color:#103248;
		background-blend-mode: overlay;*/
		padding-top: 400px;
		padding-bottom: 305px;
		margin-top: -145px;
		width: 100%;
		height: 100%;
		background-position: center;
		background-size: cover;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		z-index: -1;
		h3{
		color: @whiteSixty;
		font-size: 32px;
		line-height: 42px;
		margin: 0px 0px 8px 0px;
		font-family: @fontHead;
		font-weight: 300;
		}
		h1{
			color: @white;
			font-size: 64px;
			line-height: 71px;
			margin: 0px 0px 20px 0px;
			padding: 0px 0px 0px 0px;
			font-family: @fontHead;
			font-weight: 400;
		}
		.btn{
		color: @secCol;
		font-size: 14px;
		line-height: 14px;
		letter-spacing: 1px;
		padding: 0px 0px 0px 0px;
		font-family: @fontBody;
		font-weight: 700;
		background: transparent;
		border:none;
	
		&:hover{color:@white;}
	}
	}
	
		.bannerRow:after{
			background: linear-gradient(0deg,rgba(13,34,64,0.85) 0%,rgba(13,40,76,0.73) 99%) !important;
		}
		
	.bannerRow .col-md-12 {
	    width: 100%;
	    background-color: rgba(28, 41, 85, 0.7);
	    margin-top: -111px;
	}
	
	.ctaRow{
	z-index:999;
	border-top:1px solid @whiteSixty;
	padding-top: 60px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: -235px;
	margin-right: 0px;
	    margin-bottom: 35px;
	margin-left: 0px;
	color:@white;
	h2{font-family:@fontHead; font-size: 32px; line-height: 37px; font-weight: 500;}
	h3, h4{font-family:@fontHead; font-size:16px; letter-spacing:1px; font-weight:600;}
	.feature-box{
	text-align:center;
	padding-top:35px;
	i{color:@secCol; font-weight:900; font-size: 36px; width: 36px; height: 36px; line-height: 36px; }
	}}
	.txtRow{
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 120px;
	padding-left: 0px;
	margin-top: 120px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	h4{color: #a3a4b0; font-family:@fontHead; font-size: 16px; font-weight: 600; margin: 0px 0px 10px 0px; letter-spacing:1px;}
	h3{font-family: @fontHead; font-size: 32px;  line-height: 37px;  color: #09254a;}
	}
	
	.callToRow{
	background-color:@mainCol;
	padding: 80px 0px;
	h4, h3, p{color:@white;}
	p{    width: 80%;font-size: 14px; font-weight: 300;}
	.btn{width:100%;
	padding: 12px 35px;
	border: 1px solid @whiteSixty;
	color: @whiteSixty;
	background-color: transparent;
	font-size: 14px;
	border-radius: 3px;
	position: relative;
	z-index: 3;
	overflow: hidden;
	float:right;
	margin-top:100px;
	&:hover{color:@white; background-color: @secCol; border-color:@whiteSixty;}
	}}
	.padRow{margin-top:0px; padding: 100px 0px;}
	.achtergrond{ background-color: @background;}
	.bottomRow{
	background:@mainCol;
	padding-top:80px;
	padding-bottom:30px;
	color:fade(@white, 50%);
	.adres-bedrijfsnaam{display:none;}
	.as-postcode, .as-plaats{display:inline-block;}
	h4{
	margin-bottom: 15px;
	color: @whiteSixty;
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	font-family: @fontBody;
	}
	a,p{color:fade(@white, 50%); font-size: 14px;}
	}
	.footerRow{
	background-color:@mainCol; padding-top:25px;     border-top: 1px solid rgba(122,172,224,0.3); color:@white;
	a{color:#a2a2a2; text-decoration:none; &:hover{color:@secCol;}}
	}
	
	.img-responsive {border-radius:3px;}
	.slider-rij .col-md-12 {width: 100%; background-color: #ffft;    margin-top: -111px;}
	.slider-rij-innerlijk {background-color: transparent!important;text-align: left!important;color: #fff;}
	.slider-rij-innerlijk p {text-align:left;color:#fff;font-size: 64px;line-height: 71px;margin:0px;padding: 0px 0px 0px 0px;font-family: Raleway;font-weight: 400!important;}
	.slider-rij h3 {text-align:left;font-size: 32px;line-height: 42px;margin: 0px 0px 8px 0px;font-family: Raleway;   font-weight: 100!important;color:rgba(255,255,255,0.6);}
	.slider-rij {margin-top: -111px!important; }
	
	.slider-rij .btn {float: left;padding: 0px;margin-top: 20px;font-weight: 600;letter-spacing: 1px;}
	.slider-rij .btn-info {font-size: 14px;line-height: 14px;letter-spacing: 1px;padding: 0px 0px 0px 0px;font-family: Poppins;font-weight: 500;background:transparent;border:0px;color:@secCol;&:hover {color:#fff;}}
	.slider-rij .btn:after {content:'\f30b';margin-left:10px;font-family: "Font Awesome 5 Free";}
	.slider-rij .call-to-action {height: 100vh;padding: 190px 0px 250px 0px;max-width: 1140px; position: relative;}
	.slider-rij .col-md-12 {width: 100%;background:linear-gradient(0deg,rgba(13,34,64,0.85) 0%,rgba(13,40,76,0.73) 99%) !important;margin-top: -111px;}
	.call-to-action-innerlijk {background:none!important;  position: absolute;top: 40%;height: 100px;margin-top: -50px;}
	.bannerRow {display:none;}
	
	.feature-rij .col-md-3 {text-align:center;}
	.feature-rij img {max-height:80px;width:auto;margin:auto;}
	.feature-rij {padding: 0px 0px;margin-top: -230px;position: absolute;margin-left: auto;margin-right: auto;width: 100%;color:#fff}
	.feature-rij h3 {font-size: 16px;letter-spacing: 1px;font-weight: 600;color:rgba(227,230,236,0.6);font-weight:200!important;margin-bottom:0px!important;}
	.feature-rij h2 {font-size: 32px;  line-height: 37px;font-weight: 500;font-family: 'Raleway',sans-serif;margin-top:10px;}
	
	.feature-rij .feature-box {text-align:center;padding-top:35px;
	i{color:@secCol; font-weight:900; font-size: 36px; width: 36px; height: 36px; line-height: 36px; }}
	.feature-rij h4 {font-weight:200!important;}
	
	.image-kolom {padding-left:40px;}
	.tekst-kolom-rechts {padding-left:40px;}
	.tekst-kolom-links {padding-right:40px;}
	.bovenkop h4 {color: #a3a4b0;font-family: 'Raleway', sans-serif!important;letter-spacing:1px;margin-bottom:10px;font-weight:500;}
	.kop h3 {margin-top:0px;font-family: 'Raleway', sans-serif!important;font-size: 32px;line-height: 37px;color: @mainCol;}
	.kop.wit h3 {color:#fff!important;}
	
	hr.divider {border-top:1px solid @secColTrans;}
	
	.bottomRow h4 {font-family: "Poppins";margin-bottom: 15px;color: rgba(255,255,255,0.6);font-size: 16px;line-height: 26px;font-weight: 500;margin-top:0px;}
	.bottomRow .module {margin-bottom:30px;}
	.bottomRow {font-weight:100!important;}
	.bottomRow .social-media a {font-size:20px;}
	
	.tablet-mobiel {display:none;}
	
	@media only screen and (max-width: 1260px) {
	.call-to-action-innerlijk {top: 30%;}
	}
	@media only screen and (max-width: 1199px) {
	.slider-rij .call-to-action {padding: 0px;position: relative;max-width: 970px;padding-left: 15px;padding-right: 15px;}
	}
	@media only screen and (max-width: 992px) {
	.tablet-mobiel {display:inherit;padding:80px 0px;}
	.desktop {display:none;}
	#column-0-0, #column-0-1 {width:50%;}
	#column-3-2, #column-3-3, #column-3-4 {width:33%;}
	.slider-rij-innerlijk p {font-size: 58px;line-height: 66px;}
	.feature-rij {margin-top: -290px;}
	.feature-rij .hidden-xs {display:inherit!important;}
	.tekst-kolom-rechts {padding-left:15px;}
	.tekst-kolom-links {padding-right:15px;}
	.image-kolom {padding-left: 0px;}
	#column-5-0, #column-7-0, #column-9-0 {margin-bottom:40px;}
	.callToRow .btn {margin-top:30px;}
	.padRow {padding: 80px 0px;}
	#column-10-0 {width: 50%;margin-left: 25%;margin-right: 25%;margin-bottom:30px;}
	}
	@media only screen and (max-width: 767px) {
	.slider-rij-innerlijk p {font-size: 45px;line-height: 50px;}
	}
	
	@media only screen and (max-width: 480px) {
	.rowTop .contact {margin-top: 0px;}
	.rowTop .btn {font-size:12px; padding: 12px 15px;}
	.slider-rij .call-to-action {padding-left:0px;padding-right:0px;}
	.slider-rij h3 {font-size: 25px;line-height: 30px;}
	.slider-rij-innerlijk p {font-size: 30px;line-height: 36px;}
	.feature-rij .feature-box i {font-size: 30px;}
	.feature-rij h2 {font-size: 20px;line-height: 27px;margin-top:5px;}
	.feature-rij h4 {font-size:16px;}
	#column-0-0 {width: 41%;}
	#column-0-1 {width:59%;}
	.call-to-action-innerlijk {top: inherit;}
	.feature-rij {margin-top: -220px;}
	.feature-rij .feature-box {padding-top: 10px;}
	.slider-rij .call-to-action {padding: 280px 0px;}
	.callToRow p {width: 100%;}
	}