/* @font-face tijdelijk voor demo, is al onderdeel van style-newmasterBusinessdays */
@font-face {font-family: 'Montserrat-Regular'; src: url(../fonts/Montserrat-Regular.ttf) format('opentype');}
@font-face {font-family: 'Montserrat-Semibold'; src: url(../fonts/Montserrat-SemiBold.ttf) format('opentype');}
@font-face {font-family: 'Montserrat-Bold'; src: url(../fonts/Montserrat-Bold.ttf) format('opentype');}
@font-face {font-family: 'Montserrat-Extrabold'; src: url(../fonts/Montserrat-ExtraBold.ttf) format('opentype');}
@font-face {font-family: 'FontAwesomeRegular'; src: url(../fonts/fa-regular-400.ttf) format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesomeSolid'; src: url(../fonts/fa-solid-900.ttf) format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesomeBrands'; src: url(../fonts/fa-brands-400.ttf) format('truetype'); font-weight: normal; font-style: normal;}


html {
	--color-basis-sustainable: #0f4b5a;
	--color-basis-solar: #ffbf00;
	--color-basis-green: #68b42e;
	--color-basis-smart: #e94f1c;
	--color-basis-ev: #1c9bd8;
	--color-lichtgrijs: #f5f5f5;
}
body.sustainablesolutions {--color-basis:#0f4b5a;}
body.solarsolutions {--color-basis:#ffbf00;}
body.greenheatingsolutions {--color-basis:#68b42e;}
body.smartstorage {--color-basis:#e94f1c;}
body.evcharging {--color-basis:#1c9bd8;}

.logo {width: auto; max-width: calc(100% - 190px); height: auto;}
.logo a img {width: auto; height: auto; max-height: 70px; min-width: auto; max-width: 100%;}
.topRight {color: var(--color-basis-sustainable)}
.partof {color: var(--color-basis-sustainable)}
p.partof { font-family:'Montserrat-Extrabold', sans-serif; font-weight: normal; font-size: 13.5px }
p.partof a img {vertical-align: middle; height: 50px !important; width: auto !important; max-width: auto !important}

svg#curve {position: absolute; z-index: 1;left: 0; top: 0; width: auto; height: 100%; min-width: 950px; margin: 0; padding: 0; }

.cycle-pager { position: absolute; z-index: 1001; top: calc(50% - 45px); right: 30px; text-align: center; vertical-align: middle; width: 20px; height: 90px; z-index: 500; overflow: hidden; }
.cycle-pager span { font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: var(--color-wit); cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: var(--color-basis);}
.cycle-pager > * { cursor: pointer;}

a.scrolldown {display: inline-block; width: 50px; height: 50px; cursor: pointer;}
a.scrolldown:after {content:'\f107'; font-family: 'FontAwesomeSolid'; font-size: 50px; color: var(--color-wit)}
a.scrolldown:hover:after {font-size: 50px; color: var(--color-grijs)}

.hero:after {content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to right, var(--color-basis) 0%, var(--color-basis) 0%, rgba(var(--color-zwart-rgb),0.5) 0%, transparent 100%); }

.hero { text-align: left;font-size: 13.5px; min-height: 650px;}
.heroTekst {position: relative; z-index: 10; top: 0; width: 100%; max-width: 700px; margin: 0 auto 0 0; padding: 5vw 5vw 0vw 5vw; display: flex; flex-direction: column; align-items:flex-start; justify-content:center; height: 100%; }
.heroTekst.txt  h1 {font-size: 2.5em;}
.heroTekst.txt  p {color: var(--color-zwart); font-size: 1.5em;}

.marginTnegatief {margin-top: -195px;}

.containerSustainableSolutions {position: relative; z-index: 10000; font-size: 20px; line-height: 1.5em; margin: 0 auto; max-width: 1640px; text-align: center;}

.blockSustainableSolutions {display: inline-block; vertical-align: top; margin: 0 2px 20px 2px; max-width: calc(100% - 40px) }
.blockSustainableSolutions .imgContainer {width: 400px; max-width: 100%; height: 195px;background: var(--color-lichtgrijs); }
.blockSustainableSolutions .imgContainer a {display: flex; justify-content: center; align-content: center; width: 100%; height: 100%; }
.blockSustainableSolutions .imgContainer a img {height: 60px; margin: auto 0;  padding: 3px; }
.blockSustainableSolutions ul {list-style: none; margin: 0; padding: 0; }
	.blockSustainableSolutions.solar {background: var(--color-basis-solar)}
	.blockSustainableSolutions.green {background: var(--color-basis-green)}
	.blockSustainableSolutions.smart {background: var(--color-basis-smart)}
	.blockSustainableSolutions.ev {background: var(--color-basis-ev)}
.blockSustainableSolutions li {position: relative; text-align: center; color: var(--color-wit); padding: 15px;}
.blockSustainableSolutions li a {color: var(--color-wit);text-decoration: none; display: block;}
.blockSustainableSolutions li a strong {font-size: 1.2em; }
	.blockSustainableSolutions.solar li a {color: var(--color-zwart)}
	.blockSustainableSolutions.solar li a strong {color: var(--color-wit)}
.blockSustainableSolutions li a:hover {color: var(--color-zwart);text-decoration: none;}
.blockSustainableSolutions li a:hover strong {color: var(--color-zwart);text-decoration: none;}
.blockSustainableSolutions li a strong {font-weight: bold;}
.blockSustainableSolutions li:not(:first-of-type):not(li.close):before {content:''; position: absolute; top: 0; left: 0; height: 3px; width: 80%; margin: 0 10%; background: var(--color-wit)}	
.blockSustainableSolutions li.open {line-height: 30px; height: 80px; padding-bottom: 10px; cursor: pointer;}
.blockSustainableSolutions li.open:after {content:'\f107'; font-family: 'FontAwesomeSolid'; height: 30px; width: 30px; margin: 0; position: absolute; bottom: 20px; left: calc(50% - 15px); background: var(--color-wit); border-radius: 50%;}
	.blockSustainableSolutions.solar li.open:after {color: var(--color-basis-solar); }
	.blockSustainableSolutions.green li.open:after {color: var(--color-basis-green); }
	.blockSustainableSolutions.smart li.open:after {color: var(--color-basis-smart); }
	.blockSustainableSolutions.ev li.open:after {color: var(--color-basis-ev); }
	.blockSustainableSolutions li.open:hover:after {color: var(--color-zwart)}
.blockSustainableSolutions li.close {line-height: 30px; height: 40px; padding-bottom: 10px; cursor: pointer;}
.blockSustainableSolutions li.close:after {content:'\f106'; font-family: 'FontAwesomeSolid'; height: 30px; width: 30px; margin: 0; position: absolute; bottom: 10px; left: calc(50% - 15px); color: var(--color-basis-solar); background: var(--color-wit); border-radius: 50%;}
	.blockSustainableSolutions.solar li:last-of-type:after {color: var(--color-basis-solar); }
	.blockSustainableSolutions.green li:last-of-type:after {color: var(--color-basis-green); }
	.blockSustainableSolutions.smart li:last-of-type:after {color: var(--color-basis-smart); }
	.blockSustainableSolutions.ev li:last-of-type:after {color: var(--color-basis-ev); }
	.blockSustainableSolutions li:hover:last-of-type:after {color: var(--color-zwart)}
.blockSustainableSolutions li:not(:first-of-type) {display: none;}
.blockSustainableSolutions li:not(:first-of-type).showThis {display: block;}
.allopen .blockSustainableSolutions li:not(:first-of-type) {display: block;}
/* variant met één blok */
.blockSustainableSolutions.large .imgContainer {width:1280px; height: 195px; }
.blockSustainableSolutions.large .imgContainer a img {width: 100%; max-width: 990px; height: auto;  margin: auto 0px;  padding: 10px; }
.blockSustainableSolutions.large li {position: relative; text-align: center; color: var(--color-wit); padding: 30px 15px;}
.blockSustainableSolutions.large li a strong {font-family: 'Montserrat-bold', sans-serif; color:var(--color-wit); font-size: 1.2em;}

footer .contentWrapper .main.txt { display: flex; justify-content:flex-start; align-content: center; text-align: left; padding: 2.5vw 30px;font-family:'Montserrat-bold', sans-serif; font-weight: normal; line-height: 1.8em;  }
footer .contentWrapper p b {font-family:'Montserrat-extrabold', sans-serif; font-weight: bold;}
footer .contentWrapper p img {max-width: 100%; vertical-align: middle; margin-bottom: 20px; }

footer .contactFooter { margin-left: auto;}
footer .main.txt:last-of-type p {width: 100%; border-top: solid 1px var(--color-zwart); padding-top: 10px;}

.mobiel {display: none;}

@media screen and (max-width: 1640px){
	.containerSustainableSolutions {max-width: 820px;}
}
@media screen and (max-width: 890px){	
	svg#curve {left: 0px; min-width: auto; width: 760px; height: 100%; }
	.heroTekst {position: relative; z-index: 10; top: 0; width: 100%; max-width: 500px; padding: 30px;}
	.heroTekst.txt  h1 {text-align: left; }
	.heroTekst.txt  p {text-align: left; }	
	.topRight {width: 106px;  justify-content: flex-start;}
	p.partof a img {height: 25px !important;}
	.marginTnegatief {margin-top: 10px;}
}
@media screen and (max-width: 760px){
	.mobiel {display: block;}
	svg#curve {min-width: auto; width: 100%;}
	.heroTekst.txt p {display: none; }	
	.heroTekst.txt p:last-of-type {display: block; }	
	.main.txt {text-align: left; margin: 0 20px;}
}