@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Raleway:wght@300;600;700&display=swap');
	
	@priCol: #7D261C;
	@secCol: #faba19;
	@gray: #4c4c4c;
	@lightGray: #a3a4b0;
	@white: #fff;
	@black: #000;
	@dark: #2d2d2d;
	@background:#f7f7f7;
	@footer: #0e0e0e;
	
	@headFont: 'Raleway',sans-serif;
	@mainFont: 'Poppins', sans-serif;
	
	body, p{
	font-family:@mainFont;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: @lightGray;
	}
	a{color:@priCol; &:hover{color:darken(@priCol, 20%);}}
	.mainHeader{
	margin: 0px;
	padding:0px;
	color:@dark;
	font-size: 32px;
	line-height: 34px;
	font-family: @headFont;
	font-weight: 500;
	margin-bottom:15px;
	}
	.divider-line{
	border-bottom: 1px solid fade(@priCol, 40%); 
	width:100%;
	margin-top:20px;
	margin-bottom:13px;
	}
	
	.lp-top{
	background-color:fade(@gray, 80%);
	padding:10px 0;
	font-size:12px;
	position: relative;
	z-index: 100;
	a{display:inline-block; padding-right:5px; color:@white; transition: color 400ms,background-color 400ms;&:hover{color:fade(@white, 80%);}}
	.offerte-right{float:right; margin-left:10px; font-weight:600;}
	}
	
	.lp-header{
	border-color: fade(@white, 15%);
	background-color: fade(@white, 45%);
	height: 80px;
	border-bottom: fade(@priCol, 30%);
	box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
	transition: 0.3s;
	top: 0;
	left:0;
	position:relative;
	width: 100%;
	z-index: 99;
	img{
	    max-height: 70px;
	    height: 70px ;
	    padding: 3px;
	}}
	.lp-banner{
	background: url("https://www.bouwbedrijfbovenleeuwen.nl/lp/resources/images/bouwbedrijfbovenleeuwen.nl/banner-home-zw-002.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: 50% 50%;
	height:100vh;
	width: 100%;
	top: 0;
	left: 0;
	margin-top: -125px;
	position: relative;
	padding-top: 15%;
	z-index:98;
	.bannerSub{
	margin: 0px 0px 10px 0px;
	color:fade(@white, 60%);
	font-size: 32px;
	font-family: @headFont;
	font-weight:300;
	line-height: 42px;
	}
	.bannerMain{
	color: @white;
	font-size: 64px;
	line-height: 71px;
	font-weight: 300;
	font-family: @headFont;
	span{color:@secCol;}
	}
	.btn{
	text-decoration: none;
	border-radius: 0;
	color: @secCol;
	font-weight:600;
	letter-spacing: 1.4px;
	border:none;
	background-color: transparent;
	padding: 0;
	font-family: @mainFont;
	transition: all .15s ease-in-out;
	&:hover{color:@white;}
	}}
	.lp-feature{
	border-top: 1px solid fade(@secCol, 30%);
	position:relative;
	z-index:9999;
	padding-top: 60px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: -235px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: @white;
	.featureSub{    
	margin: 0px 0px 10px 0px;
	text-transform: none;
	padding: 0px 0px 0px 0px;
	font-size:16px;
	font-weight:600;
	line-height:1.2;
	letterspacing:1px;
	font-family: @headFont;
	}
	.featureMain{
	    font-size: 32px;
	    font-weight: 300;
	font-family:@headFont;
	line-height:1.2;
	}
	img{
	margin-left:auto;
	margin-right:auto;
	max-width:58px;
	}
	h4:not(.featureSub){
	text-align:center;
	color:@secCol;
	font-family:@headFont;
	font-weight: 600;
	font-size:14px;
	}}
	.lp-txtmain{
	position:relative;
	display:block;
	margin-top:30px;
	padding: 100px 0;
	.subHeader{
	color: @lightGray;
	font-size: 16px;
	font-weight: 600 ;
	margin: 0px 0px 10px 0px;
	font-family:@headFont;
	}
	.btn{
	text-decoration: none;
	border-radius: 0;
	color: @priCol;
	font-weight:600;
	letter-spacing: 1.4px;
	border:none;
	background-color: transparent;
	padding: 0;
	font-family: @mainFont;
	transition: all .15s ease-in-out;
	&:hover{color:@gray;}
	}
	img{
	border-radius: 5px;
	}}
	.lp-cta{
	background-color:@gray;
	padding:100px 0px;
	.subHeader{
	color: @white;
	font-size: 16px;
	font-weight: 600 ;
	margin: 0px 0px 10px 0px;
	font-family:@headFont;
	}
	.mainHeader{color:@white;}
	p{
	color:@white; 
	font-size:14px;
	}
	.btn{
	background-color:@priCol;
	color:@white;
	font-size: 14px;
	padding: 17px 35px;
	border: none;
	border-radius: 3px;
	position: relative;
	z-index: 3;
	overflow: hidden;
	transition: all .15s ease-in-out;
	width:100%;
	&:hover{background-color:darken(@priCol, 10%);}
	}}
	.lp-txtlast{padding: 100px 0; background-color:@background;}
	.lp-bottom{
	background-color:@footer;
	color: fade(@white, 50%);
	padding-top:80px;
	a:hover{color:@priCol;}
	h4{
	color: fade(@white, 60%);
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	padding-bottom:40px;
	}}
	.lp-footer{
	.lp-txtmain .subHeader{margin-top:30px;}
	background-color:@footer;
	    border-top: 1px solid fade(@secCol, 30%);
	padding-top:40px;
	padding-bottom:40px;
	text-align:center;
	a:hover{color:@secCol;}
	}
	@media (max-width:992px){
	.lp-top{
	.col-md-6 {width:48%;}
	}
	.lp-txtmain .subHeader{margin-top:25px;}
	.lp-feature{display:none;}
	.lp-banner{
	padding-top: 30%;
	}}
	@media (max-width:600px){
	.lp-top{.col-md-6 {width:100%;}}
	.lp-top .offerte-right{float:left;}
	.lp-banner{margin-top: -152px; padding-top: 45%;}
	.lp-banner .bannerMain{
	
	font-size: 44px;
	line-height: 50px;
	}}