@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;700&display=swap');

/*---------------------------------------------------------------------------------------------------------------*/
/*GENERAL*/
*{margin:0}
body{cursor:default;margin:0;font:16px/21px 'Work Sans', sans-serif;font-weight:400;letter-spacing:-0.0125em;color:rgb(60,60,60);-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
.flow{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}

/*TYPOGRAPHY*/
a,a:visited{color:rgb(150,150,150);text-decoration:none;-webkit-transition:color .4s ease;-moz-transition:color .4s ease;-o-transition:color .4s ease;transition:color .4s ease}
a:hover{color:rgb(120,165,115)}
h{font:32px/32px 'Work Sans';font-weight:600;letter-spacing:-0.025em}
.green{color:rgb(97,165,216)}/*120,165,115*/

.lightblue{color:rgb(95,165,215)}

/*---------------------------------------------------------------------------------------------------------------*/
/*HEADER+MENU*/
header{z-index:2;position:fixed;top:0;padding:25px 30px 42px 30px;width:calc(100% - 60px);height:0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:#fff}
header a,header a:visited{color:rgb(60,60,60)}
.nav-up{top:-67px}
.posneg{background:0 0}
.logo{float:left;margin:-10px 10px;width:calc(50% - 20px)}
.logo svg{cursor:pointer;width:123px;height:30px;/*fill:rgb(60,60,60)*/}
.nav{float:left;margin:2px 10px 0 10px;width:calc(40% - 20px)}/*standard 45%*/
.lang{float:left;margin:3px 10px 0 10px;width:calc(10% - 20px);font:12px/22px 'Work Sans';letter-spacing:0;text-align:right}
.plus{display:none}
.menu{cursor:pointer;z-index:3;position:absolute;top:22px;right:35px;height:30px;width:30px}
.menu-link{width:100%;height:100%}
.plus-icon{z-index:3;position:absolute;width:23px;height:23px;margin:auto;top:0;right:0;bottom:0;left:0}
.plus-bar{z-index:3;position:absolute;top:45%;left:0;width:100%;height:2px;border-radius:2px;background-color:#1e1e1e;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.plus-bar-2{top:0;bottom:0;left:45%;margin:auto;width:2px;height:100%}
.logo.open{position:absolute;top:-10px;margin:25px 40px;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.logo.open svg{fill:#fff}
.menu.open .plus-bar-1,.menu.open .plus-bar-2{transform:rotate(135deg);background-color:#fff}
.menu-overlay{z-index:3;position:fixed;overflow-y:auto;overflow-x:hidden;top:0;left:0;height:100%;width:100%;visibility:hidden;opacity:0;background-color:rgba(120,165,115,.95);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;-webkit-transition-duration:.4s;-moz-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s;-webkit-overflow-scrolling:touch;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.menu-overlay.open{visibility:visible;opacity:1;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.menu-overlay nav{display:table;table-layout:fixed;margin-top:69px;width:100%;height:calc(100% - 90px);color:#5a5a5a}
.menu-overlay ul{display:table-cell;vertical-align:middle;margin:0;padding:0}
.menu-overlay li{font:40px/80px 'Work Sans';font-weight:300;letter-spacing:-0.050em;text-align:center;list-style-type:none;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.menu-overlay p{font:16px/32px 'Work Sans';font-weight:400;text-align:center;list-style-type:none}
.menu-overlay li a,.menu-overlay li a:visited,.menu-overlay p a,.menu-overlay p a:visited{color:#fff}
.menu-overlay li a:hover,.menu-overlay p a:hover{color:#5a5a5a}
.menu-overlay li a:active,.menu-overlay p a:active{color:#3c3c3c}

/*---------------------------------------------------------------------------------------------------------------*/
/*COVER*/
#cover{cursor:pointer;height:auto;min-height:100vh;background-repeat:no-repeat;background-position:center;background-size:cover}
.headline{z-index:2;position:absolute;display:flex;justify-content:center;align-items:center;margin:120px 40px 120px 40px;width:calc(100% - 80px);min-height:calc(100% - 240px);height:auto;font:108px/108px 'Work Sans';font-weight:600;letter-spacing:-0.050em;text-align:center}
.headline svg{fill:#fff;height:45vh}

/*---------------------------------------------------------------------------------------------------------------*/
/*MAIN*/
main{z-index:1;padding:100px 50px 2.5rem 50px;width:calc(100% - 100px)}
.pack{display:table;width:100%}
.pack img{width:100%}

.divider{display:table;width:100%}
.ruler{clear:both;display:block;float:left;margin:0 10px;width:calc(100% - 20px);border-bottom:thin solid black}

.intro{font:96px/108px 'Domine'}
.copy{font:24px/33px 'Work Sans';letter-spacing:-0.025em}

.div1{position:relative;float:left;margin:40px 10px;width:calc(8.3333% - 20px)}
.div2{position:relative;float:left;margin:40px 10px;width:calc(16.6666% - 20px)}
.div3{position:relative;float:left;margin:40px 10px;width:calc(25% - 20px)}
.div4{position:relative;float:left;margin:40px 10px;width:calc(33.3333% - 20px)}
.div5{position:relative;float:left;margin:40px 10px;width:calc(41.6666% - 20px)}
.div6{position:relative;float:left;margin:40px 10px;width:calc(50% - 20px)}
.div7{position:relative;float:left;margin:40px 10px;width:calc(58.3333% - 20px)}
.div8{position:relative;float:left;margin:40px 10px;width:calc(66.6666% - 20px)}
.div9{position:relative;float:left;margin:40px 10px;width:calc(75% - 20px)}
.div10{position:relative;float:left;margin:40px 10px;width:calc(83.3333% - 20px)}
.div11{position:relative;float:left;margin:40px 10px;width:calc(91.6666% - 20px)}
.div12{position:relative;float:left;margin:40px 10px;width:calc(100% - 20px)}

.show1750{display:none}

/*---------------------------------------------------------------------------------------------------------------*/
/*PRODUCTS*/
.pro-headline{margin:40px 60px 0 60px;width:calc(100% - 120px);font:64px/64px 'Work Sans';font-weight:500px;letter-spacing:-0.050em}
.pro-class{margin:5px 10px 0 10px;width:calc(100% - 20px);font:20px/20px 'Work Sans';font-weight:600;letter-spacing:-0.025em}
.product{float:left;margin:20px 10px;width:calc(33.3333% - 20px);font:64px/74px 'Poppins';font-weight:200;letter-spacing:-0.050em;color:rgb(97,165,216)}
.product a:hover,.product a:hover > .green,.product a:hover > .lightblue{color:rgb(60,60,60)}
.pro-dida{margin:5px 0 0 60px;width:auto;font:16px/21px 'Work Sans';font-weight:400;letter-spacing:-0.0125em;color:rgb(60,60,60)}
.pro-dida a:hover{color:rgb(120,165,115)}
.pro-1{color:rgb(97,165,216)/*color:rgb(100,165,200)*/}
.pro-2{color:rgb(97,165,216)/*color:rgb(105,165,185)*/}
.pro-3{color:rgb(97,165,216)/*color:rgb(105,165,170)*/}
.pro-4{color:rgb(97,165,216)/*color:rgb(110,165,160)*/}
.pro-5{color:rgb(97,165,216)/*color:rgb(115,165,145)*/}
.pro-6{color:rgb(97,165,216)/*color:rgb(115,165,130)*/}

.keypoints{float:left;background:rgba(97,165,216,0.25);width:100%;height:auto;font:30px/30px 'Poppins';font-weight:600;padding:40px 0 60px 0;color:rgb(97,165,216)}
.keypoints-left{float:left;height:auto;width:calc(50% - 180px);margin:0 120px 0 60px}
.keypoints-left h{color:rgb(60,60,60)}
.keypoints-right{float:left;height:auto;width:calc(50% - 180px);margin:0 120px 0 60px}

/*---------------------------------------------------------------------------------------------------------------*/
/*SUSTAINABILITY*/
.sustain{background:rgb(120,165,115);width:100%;height:auto;font:96px/108px 'Domine';padding:20px 0}
.sustain h{color:white}
.sustain-text{padding:0 50px}

/*---------------------------------------------------------------------------------------------------------------*/
/*CONNECT*/
.connect{float:left;width:100%;height:auto;font:72px/84px 'Poppins';font-weight:400;padding:20px 0 60px 0}
.connect a,.connect a:visited{color:inherit}
.connect a:hover{color:rgb(97,165,216)}
.connect-text{padding:0 50px}

/*---------------------------------------------------------------------------------------------------------------*/
/*FOOTER*/
footer{float:left;z-index:-1;bottom:0;padding:60px 40px;width:calc(100% - 80px);color:rgb(150,150,150);background-color:rgb(60,60,60);background-image:url(../img/logo-background-03.png);background-repeat:no-repeat;background-position:right;background-size:contain}
footer svg{cursor:pointer;width:205px;height:50px;fill:rgb(255,255,255)}
.fcopy{margin-left:70px;font:50px/50px 'Work Sans';letter-spacing:-0.025em}
.fcopy a:hover{color:#fff}
.finfo{margin-left:70px}


/*---------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------*/


@media (max-width:1750px){
.hide1750{display:none}
.show1750{display:block}
.intro{font:72px/87px 'Domine'}
.copy{font:20px/27px 'Work Sans'}
.sustain{font:66px/76px 'Domine'}
}

@media (max-width:1500px) {
.logo{width:calc(40% - 20px)}
.nav{width:calc(50% - 20px)}
.lang{width:calc(10% - 20px)}
}

@media (max-width:1450px){
.hide1450{display:none}
.show1450{display:block}
.product{width:calc(50% - 20px)}
.sustain{font:54px/64px 'Domine'}
}

@media (max-width:1350px){
.hide1350{display:none}
.show1350{display:block}
/*.logo{width:calc(25% - 20px)}*/
/*.nav{width:calc(70% - 20px)}*/
/*.lang{width:calc(5% - 20px)}*/
.copy{font:18px/25px 'Work Sans'}
.div3{width:calc(33.3333% - 20px)}
.div4{width:calc(41.6666% - 20px)} .products{width:calc(41.6666% - 20px)}
.div5{width:calc(50% - 20px)}
.div6{width:calc(58.3333% - 20px)}
.div8{width:calc(75% - 20px)}
.keypoints-left, .keypoints-right {width:calc(100% - 120px);margin:0 60px -30px 60px}
}

@media (max-width:1260px) {
.logo{width:calc(20% - 20px)}
.nav{width:calc(65% - 20px)}
.lang{width:calc(15% - 20px)}
}

@media (max-width:1000px){
.hide1000{display:none}
.show1000{display:block}
.intro{font:64px/72px 'Domine'}
.copy{font:16px/21px 'Work Sans';letter-spacing:-0.0125em}
.div3{width:calc(41.6666% - 20px)}
.div4{width:calc(50% - 20px)} .products{width:calc(50% - 20px)}
.div5{width:calc(58.3333% - 20px)}
.div6{width:calc(66.6666% - 20px)}
.div7{width:calc(75% - 20px)}
.div8{width:calc(83.3333% - 20px)}
.product{width:calc(75% - 20px)}
.sustain{font:48px/58px 'Domine'}
}

@media (max-width:945px){ /*standard 880px*/
.hide750{display:none}
.show750{display:block}
header{padding:20px 15px 36px 15px;width:calc(100% - 30px)}
.nav-up{top:-56px}
.logo{margin:-10px 5px 0 5px;width:calc(50% - 10px)}
.lang,.nav{display:none}
.plus{display:block;float:left;margin:0 5px;width:calc(50% - 10px)}
.menu{top:13px;right:15px;height:30px;width:30px}
.logo.open{margin:20px 20px 0 20px}
.menu-overlay li{font:36px/82px 'Work Sans';font-weight:300;letter-spacing:-0.050em}
main{padding:45px 15px 0 15px;width:calc(100% - 30px)}
.intro{font:48px/52px 'Domine'}
.div1,.div10,.div11,.div12,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.product{margin:20px 5px 40px 5px;width:calc(100% - 10px)}
.pro-headline{margin:40px 20px 0 20px;width:calc(100% - 40px);font:48px/52px 'Work Sans';font-weight:500px;letter-spacing:-0.050em}
.product{font:48px/52px 'Poppins';font-weight:200;letter-spacing:-0.050em;margin:10px 10px 0 10px}
.sustain{font:27px/39px 'Domine'}
.sustain-text{padding:0 25px}
footer, footer a, footer a:visited{color:rgb(200,200,200)}
footer svg{width:123px}
.fcopy{margin-left:38px;font:25px/30px 'Work Sans'}
.finfo{margin-left:38px}
}