/* :root {
    --fs-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
    --fs-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    --fs-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
    --fs-lg2: clamp(1.50rem, 1.2rem + 1.0vw, 2.0rem);
    --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem);
    --fs-3xl: clamp(3.25rem, 2.2rem + 3.5vw, 4.5rem);
    --fs-4xl: clamp(3.50rem, 3.2rem + 4.0vw, 6.5rem);
}
*/
:root {
/* basis */
--fs-sm: clamp(0.744rem, 0.68rem + 0.17vw, 0.85rem);
--fs-base: clamp(0.85rem, 0.765rem + 0.34vw, 0.956rem);
--fs-lg: clamp(1.063rem, 0.935rem + 0.68vw, 1.275rem);
--fs-lg2: clamp(1.275rem, 1.02rem + 0.85vw, 1.7rem);
--fs-xl: clamp(1.339rem, 1.071rem + 1.148vw, 1.913rem);
--fs-2xl: clamp(1.913rem, 1.53rem + 2.125vw, 2.975rem);
--fs-3xl: clamp(2.763rem, 1.87rem + 2.975vw, 3.825rem);
--fs-4xl: clamp(2.975rem, 2.72rem + 3.4vw, 5.525rem);

/* tussenstappen */
--fs-smb: clamp(0.797rem, 0.723rem + 0.255vw, 0.903rem);
--fs-baseb: clamp(0.957rem, 0.85rem + 0.51vw, 1.116rem);
--fs-lgb: clamp(1.169rem, 0.978rem + 0.765vw, 1.488rem);
--fs-lg2b: clamp(1.307rem, 1.045rem + 0.999vw, 1.807rem);
--fs-xlb: clamp(1.626rem, 1.301rem + 1.637vw, 2.444rem);
--fs-2xlb: clamp(2.338rem, 1.7rem + 2.55vw, 3.4rem);
--fs-3xlb: clamp(2.869rem, 2.295rem + 3.188vw, 4.675rem);
}

body,
html {
    height: 100%;
    max-width: 100% !important;
    overflow-x: hidden;
    margin: 0 !important;
}

html
{   
    font-family:"Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: #454545;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.menubutton {
    float:right;
    cursor: pointer;
}

/* ------------------------------ START BLOK ------------------------------*/
.starttext
{
    box-sizing: border-box;
}

.starttext h1
{ 
    font-size: var(--fs-4xl);
    line-height:1em;
    letter-spacing:-2px !important;
    font-weight:500;
}

.starttext p
{ line-height:1.4em; color: #666;
font-size: var(--fs-lgb);
}

.kerngetallen
{ position:absolute; bottom:10px; left:-20px; background-color:#fff; width:52%; -webkit-box-shadow: 2px 2px 10px 2px #A1A1A1; box-shadow: 2px 2px 10px 2px #A1A1A1; box-sizing: border-box; padding:30px 40px;}
.kerngetallen h1 { text-transform: uppercase; color: #98bf0e; font-size: var(--fs-xlb); font-weight:600; margin:0px; padding:0px;}
.kerngetallen p { text-transform: uppercase;  color:#999; font-size: var(--fs-baseb); margin:2px; 0px 10px 2px; font-weight:600;}

.kerngetallen p {
border-bottom: 2px solid #98bf0e;
padding-bottom: 10px;
}

.kerngetallen p:last-of-type {
border-bottom: none;
}
#Opening { margin-bottom:100px;}
/* ------------------------------ MEDEWERKER CITAAT ----------------------*/
.medewerker { line-height:1.6em; display:flex; align-items:flex-end; margin-top:50px; }
.medewerker img { float:left; width:35%; height:auto; }
.medewerkercitaat { font-size: var(--fs-lg2b); font-weight:600; color:#666; }
.medewerkernaam { font-size: var(--fs-baseb);  font-weight:500; color:#999; }
.medewerkerfunctie { font-size: var(--fs-baseb);  font-weight:500; color:#999; }

/* ------------------------------ HERO BLOK ------------------------------*/
.herospanningdiv
{background-color: rgba(73,73,65,1);
padding:50px 0px;
}

.herosettingheader
{box-sizing:border-box; padding:20px 0px 50px 0px;}

.heroitemloop
{box-sizing:border-box; padding:25px 0px 25px 0px;}

.herouitgelicht
{text-transform:uppercase; box-sizing:border-box; background-color: rgba(145,146,141,1); color:#fff; padding:10px 40px 10px 40px;  letter-spacing:1px; font-weight:400;
font-size: var(--fs-base);
}

.heroinfobox
{box-sizing:border-box; padding: 8px 35px;}

.herotitle
{font-size: var(--fs-xl);font-weight:400; color:#fff; margin-top:20px;}

.herointrotext
{color:#cccccc; font-size: var(--fs-lg);}

.herointrotext p
{ padding:0px !important; margin:0px !important;}

.herokopjes
{color:#fff; font-size: var(--fs-lg) !important;}

.herokopjes p
{margin:0px 0px 20px 0px !important; padding:0px !important;}
.herokopjes .nieuwkopje 
{text-transform: uppercase !important; color:#999 !important; font-weight:400 !important;}

/* ------------------------------ RECENTE PROJECTEN ------------------------------*/
.recenteprojecten 
{
box-sizing: border-box;
padding:0px 0px 15px 0px;
color:#009cd9;
font-size: var(--fs-xl);
font-weight:500;
}

.featureditemloop {
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
}

.featureditemloop:nth-child(odd) {
padding-left: 0px;
padding-right: 18px;
}

.featureditemloop:nth-child(even) {
padding-left: 18px;
padding-right: 0px;
}

.recenttitel
{ margin-bottom:-20px;}
@media only screen and (max-width: 768px) {
.featureditemloop:nth-child(odd) {
padding-left: 0px;
padding-right: 0px;
}
.featureditemloop:nth-child(even) {
padding-left: 0px;
padding-right: 0px;
}
.recenttitel
{ margin-bottom:-10px;}

}
/* ------------------------------ REVIEW QUOTES ------------------------------*/

.reviewheading
{ box-sizing: border-box; color:#111111; font-size: var(--fs-2xl); font-weight:400; padding:0px !important; line-height:1em;
text-align:center; width:100%; margin-bottom:50px;}



/* ------------------------------ GROENE FOOTER ------------------------------*/
.klaaromtebouwen
{ box-sizing: border-box; color:#ffffff; font-size: var(--fs-xlb); font-weight:400; margin:0px !important; padding:0px !important; line-height:1em;}


.klaaromtebouwenspanningdiv
{ background-color: #98bf0e; box-sizing: border-box; padding:70px 0px 60px 0px;}

.klaaromtebouwenspanningdiv a { color:#fff !important; text-decoration:none !important; }

.klaaromtebouwentextdiv 
{ box-sizing: border-box; padding:30px 0px 30px 0px; font-weight:400; 
font-size: var(--fs-lg);
}




.greenlink
{color:#98bf0e !important; font-size: var(--fs-lg); text-transform: uppercase; text-decoration: none; font-weight:600;}

.calltoactiongroen,
.calltoactiongroencenter,
.calltoactionwit,
.calltoactionwitgroen {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.calltoactiongroen
{ float:left; text-align:center; vertical-align: middle; width:55%; margin-right:2%; background-color: #98bf0e; text-transform:uppercase; box-sizing:border-box; color:#fff; padding:25px 40px 25px 40px; font-size: var(--fs-baseb); letter-spacing:1px; font-weight:600; cursor:pointer; border:1px solid #98bf0e;}
.calltoactiongroen:hover
{ background-color:rgba(152,191,14,0.2); color:#98bf0e; }

.calltoactiongroencenter
{ text-align:center; vertical-align: middle; width:80%; max-width:400px;margin:0 auto; background-color: #98bf0e; text-transform:uppercase; box-sizing:border-box; color:#fff; padding:25px 40px 25px 40px; font-size: var(--fs-baseb); letter-spacing:1px; font-weight:600; cursor:pointer; border:1px solid #98bf0e;}
.calltoactiongroencenter:hover
{ background-color:rgba(152,191,14,0.2); color:#98bf0e; }

.calltoactionwit
{ float:left; width:43%; background-color: #ffffff; text-align:center; text-transform:uppercase; box-sizing:border-box; color:#888; border:1px solid #999; padding:25px 40px 25px 40px; font-size: var(--fs-baseb); letter-spacing:1px; font-weight:600; cursor:pointer;}
.calltoactionwit:hover
{ background-color:#888; color:#fff; border-color:#888; }

.calltoactionwitgroen
{ width:60%; max-width:400px; background-color: #ffffff; text-transform:uppercase; box-sizing:border-box; color:#98bf0e; border:1px solid #98bf0e; padding:25px 40px 25px 40px; font-size: var(--fs-baseb); letter-spacing:1px; font-weight:600; margin:0 auto; cursor:pointer;}
.calltoactionwitgroen:hover
{ background-color:#98bf0e; color:#fff; border-color:#fff; }

.calltoactiongroen,
.calltoactionwit {
display: flex;
align-items: center;
justify-content: center;
}


.bottomspace { box-sizing: border-box; padding-bottom:150px; padding-top:60px;}