@main:#8D8741;
@mainsub:#659DBD;
@sub:#DAAD86;
@min:#BC986A;
@light:#FBEEC1;
@wit:#fff;
@zwart:#000;
@rood:#f00;
@dark:#006923;


html{ scroll-behavior: smooth;}
.btn{border-radius:0px}
.spacer{min-height:200px}
.spacer2{min-height:100px}
strong{color:@dark}
/* list style */
li{ list-style:none;padding:0px;margin:0px;}
/* list style */

/* input fields */
input,textarea,select{min-width:100%;padding:4px;margin:4px;}
textarea{min-height:240px}
/* input fields */



/* knop */

.groteknop{font-size:125%;color:@wit;background-color:@min;padding:10px;border:2px solid darken(@min,10%);transition:ease-in-out 500ms all;text-align:center}
.groteknop:hover{background-color:darken(@min, 30%);top:2px;left:2px;}
.link-lees-meer{background-color:@dark;width:160px;color:@wit;padding:5px;float:right;clear:both;text-align:center;margin-top:10px;}
.link-lees-meer{float:right;margin-right:20px;}
.link-lees-meer i{margin-left:5px;margin-top:5px}
.uitgelicht-tekst .link-lees-meer{margin-top:0px;}

.groen{background-color:@dark!important;color:@wit!important;border-color:darken(@dark,10%)}
.groteknop:hover{background-color:darken(@dark, 30%)!important}
/* knop */


/*header*//*topbar menu*/
.topbar{background-color:@dark;color:@light;padding:15px}
.topbar a{border:1px solid @wit;color:@wit;padding:5px}
.uspholder{background-color:@dark;color:@wit;padding-top:100px;padding-bottom:100px;margin-top:-40px;z-index:10;}

/* navigatie & menu*/
.menubar{background-color:@wit;padding-top:10px;padding-bottom:10px;color:@dark}
.nav a{text-decoration:none;color:@dark;}
.nav li {display:inline-block;border-bottom:3px solid @wit;transition:ease-in-out 300ms all}
.nav li:hover{border-bottom:3px solid @min;background-color:fade(@dark,40%)}
.nav .actief{border-bottom:3px solid @min}
.nav li li{margin:0px;padding:0px;}
.nav li li a{transition:ease-in-out 300ms all}
.nav li ul{display:none;position:absolute;background-color:rgba(255,255,255,0.6);padding:0px;margin:0px;padding:10px;line-height:30px;border-bottom-right-radius: 5px;border-right:2px solid @main;border-bottom:2px solid @main}
.nav li:hover ul {display:block;}
.nav li:hover{color:@wit}
.nav li{padding:10px;margin:5px;}
.nav li li{display:block;border-bottom:2px solid @wit;transition:ease-in-out 250ms all}
.nav li{transition:ease-in-out 300ms all}

/* navigatie & menu*/
.navigatie-klein{min-width:25px;width: 25px;height: 25px;margin-left:20px;}

/* mainheader */
.mainheader{background-image:url('../afbeeldingen/main-header.jpg');background-repeat:no-repeat;padding:30vh;background-size:cover;}
.slogan-header {margin-top: -80px;font-size: 48px;font-weight: 600;text-align:center;text-align:center;text-transform: uppercase;color:@dark;padding: 20px;  background-color:fade(@wit,60%)}

/*zoekbar*/
.mainheader input{background-color:fade(@wit,90%);border:1px solid @dark!important;border-right:0px;border-radius:0px;padding:25px;font-weight:600}

/* uspholder */
.titleblok{float:left;width:70px;max-width:70px;height:70px;padding:20px;}
.titlebloktekst h1{margin-left: 62px;margin-bottom: 0px;font-size:1.5rem!important}
.uspholder p{line-height:1.5}
.blaadje{margin-right:20px;transform:rotate(305deg);float: left;width: 50px;height: 50px;shape-outside: url('../afbeeldingen/leaf.png');shape-margin: 15px;shape-image-threshold: 0.5;background: #009966 url('../afbeeldingen/blaadje.jpg');-webkit-mask-image: url('../afbeeldingen/leaf.png');	mask-image: url('../afbeeldingen/leaf.png');}
.blaadje-klein{transform:rotate(305deg);float: left;width: 25px;height: 25px;shape-outside: url('../afbeeldingen/leaf-small.png');shape-margin: 15px;shape-image-threshold: 0.5;background: #009966 url('../afbeeldingen/blaadje.jpg');-webkit-mask-image: url('../afbeeldingen/leaf-small.png');	mask-image: url('../afbeeldingen/leaf-small.png');}
.usptitle{font-size:120%;color:@wit;font-weight:600}

/* uitgelicht */
.margin-top{margin-top:-50px;}
.overflowhidden{overflow:hidden;}
.uitgelicht{background-position:center center;min-width:100%;min-height:800px;margin-top:-10px;background-size:cover;transition:ease-in 1000ms all;max-width:100%;position:relative;z-index:100;}
.uitgelicht:hover{transform:scale(1.5)}
.uitgelicht-tekst-blok{background-color:fade(@dark, 80%);padding:20px;position:relative;margin-top:-175px;color:@wit;z-index:200;}
.uitgelicht-titel{font-size:125%;}
.uitgelicht-tekst{font-size:85%}
.uitgelicht-tekst img{float:right;max-height:350px;}



/* uitgelicht */
.overflowhidden{overflow:hidden;}
.tag{background-position:center center;min-width:100%;min-height:400px;margin-top:-10px;background-size:cover;transition:ease-in 1000ms all;max-width:100%;position:relative;z-index:100;}
.tag:hover{transform:scale(1.5)}
.tag-tekst-blok{background-color:fade(@dark, 80%);padding:20px;position:relative;margin-top:-175px;color:@wit;z-index:200;}
.tag-titel{font-size:105%;}
.tag-tekst{font-size:85%}
.tag-tekst img{float:right;max-height:350px;}

.aanmelden .white, .blogblok-blogs li .white{background-color:fade(@wit, 70%);padding:25px;}

/* blogbloks */
.blogblok-blogs h2{font-size:1.75rem}
.blogblok-blogs li{padding:30px;margin-top:0px;margin-bottom:10px;}
.blogblok-blogs li{background-color:red}
.blog-afbeelding{padding-top:180px;padding-bottom:180px;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
.blog-afbeelding .container{background-color:fade(@dark,75%);padding:20px;color:@wit;}
.blogblok-blogs li .white small{padding-top:5px;display:inline-block}
.leesmeerblogs {margin-top: 15px;}
.show-blog .badge{background-color:@dark;color:@wit;margin-left:5px;}
.blog-img{padding-top:60px;}
.blog-details-holder{background-color:fade(@dark,30%);padding-top:30px;}
/* uitgelicht */
.uitgelichtholder{background-color:fade(@dark,50%);padding-top:175px;padding-bottom:120px;margin-top:-52px}
/* advertentieblok */
.sense{background-color:fade(@dark, 60%);text-align:center;font-size:200%;padding-top:15%}

/* aanmelden */
.aanmelden{background: linear-gradient(rgba(0, 105, 35, 0.65), rgba(0, 105, 35, 0.65)), url('../afbeeldingen/meld-uw-bedrijf-aan-op-hovenierin.jpg');background-repeat:no-repeat;background-size:cover;}
.aanmelden-hovenier input,.aanmelden-hovenier label{min-width:100%;padding:5px;margin:5px}

/* items */
.item-details ul{padding:0px;}
.item-details p{font-weight:600}
.item-list li{ text-indent: -5px;list-style:none}
.item-list li:before{content: "-";text-indent: -5px;margin-right:5px;}
.item-tags .badge{background-color:@dark;color:@wit;margin-left:5px;}
.item-afbeeldingen img{margin:20px;outline: 1px solid rgba(255, 255, 255, 0.8);outline-offset: -5px !important;vertical-align: top;}

.itemholder{background-color:fade(@dark,50%);padding-top:75px;padding-bottom:90px}
/* items */


/* items tonen */
.overzicht-first-row{
	background: url('../afbeeldingen/zoek-een-hovenier-bij-u-in-de-buurt.jpg');background-repeat:no-repeat;background-size:cover;
	padding-top:250px;
	padding-bottom:150px;
}

.overzicht-first-row input{min-width:100%;padding:20px;margin:10px}
/* items tonen */

/* toon item */
	.claim-vermelding{padding-top:10px;padding-bottom:10px}
	.item h1{font-size: 1.7rem;}
	.h3sub{    top: -10px;font-size: 135%;padding-left: 20px;margin-top: -15px;font-weight:600;}
	.item-mainbar{margin-top:50px;margin-bottom:50px;}
	.item-sidebar{background-color:@main;padding-top:50px;padding-bottom:50px;color:@wit}
	.item-sidebar a{color:@wit}
	.item-contact-holder{margin-top:25px}
	.item-call-to-action-holder{padding:25vh;min-height:200px;width:100%;background-repeat:no-repeat;background-size:cover;background-position:fixed;}
	.item-cta{margin-left:auto;margin-right:auto;width:60%;background-color:fade(@main,70%);text-align:center;font-size:200%;color:@light;padding:40px}
	.item-cta h1{font-size:190%;}
	
	.cta-knop{font-size:16px;max-width:200px;margin-left:auto;margin-right:auto;margin-top:30px;margin-bottom:30px;font-weight:400;background-color:@wit;color:@dark;cursor:pointer}
	.cta-knop{color:@wit;background-color:@dark;padding:10px;border:2px solid darken(@min,10%);transition:ease-in-out 500ms all;text-align:center}
	.cta-knop:hover{background-color:darken(@min, 30%);top:2px;left:2px;}
	
	
	
	/* vraag offerte aan */
		.vraag-offerte-aan{font-size:16px;max-width:200px;margin-left:auto;margin-right:auto;margin-top:30px;margin-bottom:30px;font-weight:400;background-color:@wit;color:@dark;cursor:pointer}
		.vraag-offerte-aan{color:@wit;background-color:@dark;padding:10px;border:2px solid darken(@min,10%);transition:ease-in-out 500ms all;text-align:center}
		.vraag-offerte-aan:hover{background-color:darken(@min, 30%);top:2px;left:2px;}
		.modal{color:@zwart}
		#offerte-formulier input, #offerte-formulier textarea, #offerte-formulier select{padding:10px;max-width:95%;width:95%;}
		#offerte-formulier h5{border-bottom:1px solid @main;padding-bottom:2px;margin-bottom:2px;}
		#offerte-formulier label{font-size:8pt;border-bottom:1px solid @main;margin-bottom:-10px;}
		
		.offerteblok{transition:ease-in-out all 100ms;padding:3px;}
		.offerteblok:hover{background-color:fade(@main,10%)}
	/* vraag offerte aan */
	
	/* reviews */
	.review-module{margin-top:40px;border-top:1px solid @wit;padding-top:20px;}
	.review-module h2{font-size:24px}
	.review-module textarea{max-height:100px!important;min-height:100px!important;height:100px!important}
	.uitleg-review li{border-bottom:1px solid @main;padding-bottom:2px;}
	.rating {text-align: center;font-size: 360%;color: @mainsub;}

/* loadingbar*/
@keyframes rotating {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.rotating {
  animation: rotating 1s linear infinite;
}

footer{background-color:@dark;color:@wit;padding:50px;font-size:90%;}
footer a{color:@wit}
footer a:hover{text-decoration:underline;color:@wit}

/* padding / margin knoppen */
.padding10{padding:10px}
.padding20{padding:20px}
.padding30{padding:30px}
.padding40{padding:40px}
.padding50{padding:50px}


.margin10{margin:10px}
.margin20{margin:20px}
.margin30{margin:30px}
.margin40{margin:40px}
.margin50{margin:50px}

/* padding / margin knoppen */


.fullright{margin-right:-15px!important}




/* modal background */
.modal-backdrop{background-color: @main;}
/* modal background */


/* meldingen */
.contact-show-melding{text-align:center}