/* Recycling Lifecycle Approach */

.numInfographic--circularity .mobileNum {
    display: none;
}

.numInfographic--circularity {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.numInfographic--circularity svg {
    flex-shrink: 0;
    z-index: 2;
    max-width: 100%;
    height: auto;
}

.numInfographic--circularity .num {
    cursor: pointer;
}

.numInfographic__heading--circularity {
    font-size: 26px;
    color: #3c8a2e;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.numInfographic__directions--circularity {
    margin-bottom: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: #1c8200;
}

/* get any element with a class starting with "data-num" */
[class^='data-num'] {
    cursor: pointer;
}

.numInfographic__copy--circularity {
    background-color: #f8f8f7;
    transform: translate(-50%, -50%);
    width: 470px;
    padding: 20px;
    position: absolute;
    opacity: 1;
    z-index: 3;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .numInfographic__copy--circularity {
        display: none;
    }
}

.mobile-infographic-overlays .numInfographic__copy--circularity {
    position: static;
    width: inherit !important;
    transform: none;
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 767px) {
    .mobile-infographic-overlays .numInfographic__copy--circularity {
        display: block;
    }
}

.mobile-infographic-overlays .numInfographic__copy--circularity h3 span:not(.lowercase) {
    width: 32px;
    height: 32px;
    padding: 2px 0;
    border-radius: 50%;
    display: inline-block;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    display: inline-block !important;
}

.mobile-infographic-overlays .numInfographic__copy--circularity p {
    padding-left: 40px;
}

.numInfographic__copy--circularity h3 {
    font-family: var(--font-maax), sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1c8200;
    text-transform: uppercase;
    margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
    .numInfographic__copy--circularity h3 {
        font-size: 20px;
    }
}

.numInfographic__copy--circularity h3 span {
    background-color: #e3e836;
    border: 1px solid #707070;
    color: #57584f;
    display: none !important;
}

.numInfographic__copy--circularity h3 span:not(.lowercase) {
    width: 32px;
    height: 32px;
    padding: 2px 0;
    border-radius: 50%;
    display: inline-block;
    font-family: 'din-2014', sans-serif;
    font-weight: 900;
    text-align: center;
    line-height: 1.25;
}

.numInfographic__copy--circularity h3 .lowercase {
    text-transform: initial;
}

.numInfographic__copy--circularity.numInfographic__copy--1 {
    width: 409px;
    top: 46%;
    left: 66%;
}

.numInfographic__copy--circularity.numInfographic__copy--2 {
    width: 385px;
    top: 50%;
    left: 72%;
}

.numInfographic__copy--circularity.numInfographic__copy--3 {
    width: 431px;
    top: 58%;
    left: 74%;
}

.numInfographic__copy--circularity.numInfographic__copy--4 {
    width: 405px;
    top: 64%;
    left: 66%;
}

.numInfographic__copy--circularity.numInfographic__copy--5 {
    width: 433px;
    top: 58%;
    left: 61%;
}

.numInfographic__copy--circularity.numInfographic__copy--6 {
    width: 336px;
    top: 50%;
    left: 56%;
}

.numInfographic__copy--circularity.active {
    opacity: 1;
    z-index: 3;
}

.RecyclingInfographic .st1 {
    fill: none;
    stroke: #e1e442;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st0 {
    fill: none;
    stroke: #b3cf4c;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st2 {
    fill: none;
    stroke: #258b43;
    stroke-width: 0.4861;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st3 {
    fill: #b3cf4c;
    stroke: #696b6e;
    stroke-width: 0.3593;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st4 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.4931;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st5 {
    fill: #f2f2f2;
    stroke: #686a6e;
    stroke-width: 0.4931;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st6 {
    fill: #e1e442;
    stroke: #696b6e;
    stroke-width: 0.3567;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st7 {
    fill: #258b43;
    stroke: #696b6e;
    stroke-width: 0.3748;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st8 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.3579;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st9 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.3579;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st10 {
    fill: #b3cf4c;
    stroke: #696b6e;
    stroke-width: 0.3861;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st11 {
    fill: #e1e442;
    stroke: #696b6e;
    stroke-width: 0.3861;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st12 {
    fill: #258b43;
    stroke: #696b6e;
    stroke-width: 0.3861;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st13 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.3434;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st14 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.3434;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st15 {
    fill: #f2f2f2;
    stroke: #686a6e;
    stroke-width: 0.3434;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st16 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 0.2514;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st17 {
    fill: #ffffff;
    stroke: #696b6e;
    stroke-width: 0.2514;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st18 {
    fill: #b3cf4c;
}

.RecyclingInfographic .st19 {
    fill: #686a6e;
}

.RecyclingInfographic .st20 {
    fill: #b3cf4c;
    stroke: #696b6e;
    stroke-width: 0.4348;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st21 {
    fill: #258b43;
    stroke: #696b6e;
    stroke-width: 0.4348;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st22 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.3723;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st23 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.3723;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st24 {
    fill: #e1e442;
    stroke: #696b6e;
    stroke-width: 0.4348;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st25 {
    fill: #ffffff;
    stroke: #696b6e;
    stroke-width: 0.5643;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st26 {
    fill: #b3cf4c;
    stroke: #ffffff;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st27 {
    fill: #e1e442;
    stroke: #ffffff;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st28 {
    fill: #258b43;
    stroke: #ffffff;
    stroke-width: 0.4861;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st29 {
    fill: #ffffff;
}

.RecyclingInfographic .st30 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.4522;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.RecyclingInfographic .st31 {
    fill: #00673e;
}

.RecyclingInfographic .st32 {
    fill: #eeb111;
}

.RecyclingInfographic .st33 {
    fill: #ffffff;
    stroke: #ffffff;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.RecyclingInfographic .st34 {
    fill: #d1d3d4;
    stroke: #ffffff;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}

.st35 {
    fill: #b3cf4c;
    stroke: #696b6e;
    stroke-width: 0.5976;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st36 {
    fill: #f4f4f4;
}

.st37 {
    fill: #71aa4d;
}

.st38 {
    fill: #e1e442;
}

.st39 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.3595;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st40 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.3595;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st41 {
    clip-path: url(#SVGID_00000139984294564237436330000000409149353080097455_);
}

.st42 {
    fill: #71a84d;
}

.st43 {
    fill: #717272;
}

.st44 {
    fill: #f7f8f8;
}

.st45 {
    fill: #d2d2d2;
    stroke: #696b6e;
    stroke-width: 0.5976;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st46 {
    fill: #4d514b;
}

.st47 {
    fill: #c3d942;
}

.st48 {
    fill: none;
}

.st49 {
    fill: #c9cac2;
}

.st50 {
    fill: #f2f2f2;
    stroke: #696b6e;
    stroke-width: 0.5482;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st51 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.2609;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st52 {
    fill: #e1e442;
    stroke: #696b6e;
    stroke-width: 0.5976;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st53 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.2193;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st54 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.2193;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st55 {
    fill: #f2f2f2;
    stroke: #696b6e;
    stroke-width: 0.5466;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st56 {
    fill: #c3d942;
    stroke: #686a6e;
    stroke-width: 0.2199;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st57 {
    fill: #71aa4d;
    stroke: #686a6e;
    stroke-width: 0.2199;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st58 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.2199;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st59 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.2199;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st60 {
    fill: #ffffff;
    stroke: #696b6e;
    stroke-width: 0.5976;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st61 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.2473;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st62 {
    fill: #c3d942;
    stroke: #686a6e;
    stroke-width: 0.1237;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st63 {
    clip-path: url(#SVGID_00000054223848230433641460000006376548752072387502_);
}

.st64 {
    opacity: 0.73;
}

.st65 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.1855;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st66 {
    fill: #c3d942;
    stroke: #686a6e;
    stroke-width: 0.2473;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st67 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.2473;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st68 {
    opacity: 0.49;
}

.st69 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.1855;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st70 {
    fill: #71aa4d;
    stroke: #686a6e;
    stroke-width: 0.2473;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st71 {
    clip-path: url(#SVGID_00000155115734681591147240000006525206666741774981_);
}

.st72 {
    fill: #ffffff;
    stroke: #686a6e;
    stroke-width: 0.1237;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st73 {
    fill: none;
    stroke: #686a6e;
    stroke-width: 0.1237;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st74 {
    fill: #71aa4d;
    stroke: #686a6e;
    stroke-width: 0.1855;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st75 {
    fill: #c3d942;
    stroke: #686a6e;
    stroke-width: 0.1855;
    stroke-linecap: round;
    stroke-linejoin: round;
}