header > #headerContainer { position:fixed; top:0; left:0; right:0; opacity:0; height:56px; margin:0; background-color:rgb(var(--redRGB)); transition:opacity 250ms linear 80ms; }
header > #headerContainer #closeFullPage > svg { fill:rgb(var(--whiteRGB-std)); stroke:rgb(var(--redRGB)); stroke-width:1px; width:40px;height:40px; margin:0 32px 0 16px; }
header > #headerContainer > div { flex:none; width:800px; height:100%; margin:0 auto; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
header > #headerContainer #titleFullPage { color:rgb(var(--whiteRGB-std)); }


@media only screen and (max-width:600px) {
   header { position:fixed; top:0; right:0; left:0; z-index:4; box-sizing:content-box; padding:0!important; flex:none; width:100%; height:56px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; background-color:rgb(var(--whiteRGB-std)); border-bottom:3px solid rgb(var(--blueRGB)); will-change:height, border-width; transition:height 250ms var(--standardEasing), border-width 150ms var(--standardEasing), var(--boxShadowTransition); }
   header.onScroll { box-shadow:var(--boxShadow_z4); border-bottom-width:2px; }

   header + main { margin-top:56px; }

   header > #topAppBar { flex:none; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; transition:opacity 150ms linear; width:100%; padding:0 8px 0 16px; }
   header > #topAppBar #logoHeader { display:none; }
   header > #topAppBar #svgSymbol { height:36px; width:36px; margin-top:16px; transition:all 200ms var(--standardEasing); }

   #navBar { display:none; }
}

@media only screen and (min-width:600px) { 
   header { position:fixed; top:0; right:0; left:0; z-index:4; box-sizing:content-box; padding:0!important; flex:none; width:100%; height:64px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; background-color:rgb(var(--whiteRGB-std)); border-bottom:3px solid rgb(var(--blueRGB)); will-change:height, border-width; transition:height 250ms var(--standardEasing), border-width 150ms var(--standardEasing), var(--boxShadowTransition); }
   header.onScroll { box-shadow:var(--boxShadow_z4); border-bottom-width:2px; }
   header + main { margin-top:67px; }

   header > #topAppBar { flex:none;  width:100%; max-width:1176px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; transition:opacity 150ms linear; }
   header > #topAppBar #logoHeader { height:40px; width:auto; margin-top:12px; transition:all 200ms var(--standardEasing); }
   header > #topAppBar #svgSymbol { display:none; }

   header.shrink { height:56px; }

   header.shrink + main { margin-top:56px; }
   header.shrink + main + .navigationRail { padding-top:calc(58px + 8px); }

   header.shrink > #topAppBar #logoHeader { height:36px; margin-top:16px; }

   #navBar { width:100%; max-width:var(--headerWidth); margin:var(--headerMargin); margin-left:-68px; padding:8px 0; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); }
}

main { padding-bottom:36px; background-color:rgb(var(--whiteRGB-std)); }

section[role=region] { width:100%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch; padding:60px 0 180px 0; }
div[role=region] { width:100%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch; }
[role=region] > .textContent { flex:1; min-width:360px; max-width:440px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
[role=region] > .textContent > .point { width:120px; padding:0; margin:0 auto; }
[role=region] > .textContent > .point > div:first-child { width:80px; height:80px; margin:0 auto; padding:16px; border-radius:50%; }
[role=region] > .textContent > .point > div:first-child > svg { fill:white; stroke:white; stroke-width:1px; }
[role=region] > .textContent > .point > div:last-child { width:100%; text-align:center; padding:4px; text-transform:uppercase; font-weight:600; }
[role=region] > .textContent > .point + p { text-align:justify; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing);  }
[role=region] > .imgContent { flex:1; min-width:360px; padding:16px 0; display:flex; justify-content:center; align-items:center; font:var(--overline_font); letter-spacing:var(--overline_spacing); text-transform:uppercase; }
[role=region] > .imgContent > .laptop { flex:none; position:relative; width:512px; height:310px; padding:22px calc((512px - 442px) * 0.5) 39px calc((512px - 442px) * 0.5); background-size:cover; background-image:url('/includes/images/laptop_desktop_512.png'); }
[role=region] > .imgContent > .laptop > .screen { flex:none; position:relative; width:100%; height:100%; background-size:cover; background-image:url('/includes/images/corecyclage.com_1.png'); } 

footer { flex:none; background-color:rgb(var(--blackRGB)); color:rgb(var(--whiteRGB-std)); padding:24px 16px; }






h1 { font:var(--h3_font); letter-spacing:var(--h3_spacing); line-height:1.16; margin-block:4px 0px; }
p { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1.5; color:rgba(var(--blackRGB), 0.87);  margin-block:24px 0px; }
strong { color:rgb(var(--blackRGB)); font-weight:500; text-decoration:underline; text-decoration-thickness:from-font; text-underline-offset:2px; }
b { color:rgb(var(--blackRGB)); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:1.5px; }
strong.red { color:rgb(var(--redRGB)); filter:brightness(0.92); text-decoration:unset; }

p > span { opacity:1; line-height:1.5; display:inline; transition:line-height 250ms var(--sharpEasing) 10ms, opacity 250ms var(--standardEasing) 200ms; /*transition:opacity 75ms linear 90ms, line-height 90ms linear 10ms;*/ }
p[aria-expanded=false] > span { opacity:0; line-height:0; position:absolute; }



.box { background-color: white; height: 200px; width: 200px; margin: 20px; border-radius: 50%; position:relative; }
/*.item1 { background-image:conic-gradient(rgb(var(--blueRGB)) 0deg, rgb(var(--blueRGB)) calc(0.613 * 360deg), transparent calc(0.613 * 360deg), transparent 360deg); }
.item2 { background-image:conic-gradient(rgb(var(--yellowRGB)) 0deg, rgb(var(--yellowRGB)) calc((0.613 + 0.198) * 360deg), transparent calc((0.613 + 0.198) * 360deg), transparent 360deg); }*/
/*.slice { background-image:conic-gradient(rgb(var(--blueRGB)) 0deg, rgb(var(--blueRGB)) calc(var(--slice1) * 360deg), rgb(var(--yellowRGB)) calc(var(--slice1) * 360deg), rgb(var(--yellowRGB) calc((var(--slice1) + var(--slice2)) * 360deg), rgb(var(--greenRGB)) calc((var(--slice1) + var(--slice2)) * 360deg), rgb(var(--greenRGB)) calc((var(--slice1) + var(--slice2) + var(--slice3)) * 360deg), rgb(var(--redRGB)) calc((var(--slice1) + var(--slice2) + var(--slice3)) * 360deg), rgb(var(--redRGB)) calc(1 * 360deg)); }*/
.slice { height: 200px; width: 200px; margin:0; border-radius:50%; position:absolute; top:0; left:0; z-index:1; }
.slice:hover { box-shadow:var(--boxShadow_z4); z-index:10!important; }

.slice1 { background-image:conic-gradient(rgb(var(--blueRGB)) 0deg, rgb(var(--blueRGB)) calc(.613 * 360deg), rgb(var(--blackRGB), 0.87) calc(.613 * 360deg), transparent calc(.613 * (360deg + 5deg)), transparent calc(360deg - 5deg), rgba(var(--blackRGB), 0.87) 360deg); }
.slice2 { transform:rotate(calc(.613 * 360deg)); background-image:conic-gradient(rgb(var(--yellowRGB)) 0deg, rgb(var(--yellowRGB)) calc(.198 * 360deg), transparent calc(.198 * 360deg), transparent 360deg); }
.slice3 { transform:rotate(calc((.613 + .198) * 360deg)); background-image:conic-gradient(rgb(var(--greenRGB)) 0deg, rgb(var(--greenRGB)) calc(.058 * 360deg), transparent calc(.058 * 360deg), transparent 360deg); }
.slice4 { transform:rotate(calc((.613 + .198 + .058) * 360deg)); background-image:conic-gradient(rgb(var(--whiteRGB)) 0deg, rgb(var(--whiteRGB)) calc(.049 * 360deg), transparent calc(.049 * 360deg), transparent 360deg); }
.slice5 { transform:rotate(calc((.613 + .198 + .058 + .049) * 360deg)); background-image:conic-gradient(rgb(var(--redRGB)) 0deg, rgb(var(--redRGB)) calc(.082 * 360deg), transparent calc(.082 * 360deg), transparent 360deg); }