p.top_dash { position: relative; color: #005580; font-size: 22px; font-weight: 700; padding: 1em 10em 1em 2em; }
p.top_dash:before { position: absolute; width: 100px; height: 8px; background-color: #EEBB47; content: ""; display: table; margin-top: -52px; } 

.flex-cont { display: flex; justify-content: space-between; }
/* sections */
section.ng_matter { font: normal 400 1.25em/1 'IBM Plex Sans'; background-color:#f2f2f2; color:#005584; padding: 2em 2em 4em 2em; text-align: center; margin-bottom:0;}
.ng_matter h2 { font-size: 2em; }
.ng_matter h3 { text-transform: uppercase; font-size: 1.5em; font-weight: 400; }
.ng_matter p { color:#005584; }
.ng_matter .fig_contain { display: flex; margin-top: 30px;}
.ng_matter .fig { width: 30%; border-right: 1px #005584 solid; text-align: center; position: relative; overflow: hidden; height: 220px; }
.ng_matter .fig.donut { overflow: visible; }
.donut-chart { position: relative; border-radius: 50%; overflow: hidden; margin: 0 auto; width: 200px; height: 200px; background: #005584; }
.donut-chart.d0 .slice.one { clip: rect(0 200px 100px 0); -webkit-transform: rotate(355deg); transform: rotate(355deg); background: #c1c6c8; }
.donut-chart.d0 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #c1c6c8; }
.donut-chart .slice { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.donut-chart .chart-center { top: 25px; left: 25px; width: 150px; height: 150px; background: #f2f2f2; position: absolute; border-radius: 50%; padding-top: 30px; }
.donut-chart span  { font-size: 1.4em; }
.donut-chart span.small { font-size:20px; }
.donut-chart span.block { display:block; }
.donut-label { display: block; padding: 20px 50px 0 50px; }
.one-year-detail { display:inline-block; width:45%; margin: 70px 90px 0 0; }
.one-year span.block { display: block; }
.one-year-detail span.large { font-size: 2.5em; font-weight: 700;}
.one-year-arrow { position: absolute; top: 400px; right: 40px; }
.total-detail { position: absolute; bottom:40px; text-align: center; width: 100%;}
.coinbag { right: 55px; top: 30px; }
.coin { right: 56px; top: -200px; }
.coin, .coinbag { position: absolute; }
.totaled span.block { display: block; }
.totaled span.small { font-size: 26px; margin-right: 50px; }
.totaled span.large { font-size: 2.5em; font-weight: 700; }

section.ng_young { background: url('/-/media/Resource Media Content/Education/infographic-next-gen/graduate.jpg') no-repeat; color:#fff;  padding: 4em;}
.ng_young h2 { color:#fff; font-size: 4em; }
.ng_young p { color:#fff; font-size:1.75em; width: 50%;}
.ng_young p.emph { color:#f1be48; font-weight: 700; margin-top: 130px;}
.shows-list { display: flex; margin-top: 40px;}
.show { width: 33%; opacity:0;}
.show p { width: 150px;font-size: 1.2em; display: inline-block; vertical-align: middle; }
.show .show-icon { position: relative; width:135px; margin-right: 20px; height: 135px; overflow: hidden; background-color:#f1be48; border: 3px #fff solid; border-radius: 50%; display: inline-block; vertical-align: middle; }
.show .show-img { position: absolute; top: 50%; transform: translateY(-50%); left: -150px; }

section.ng_int { padding: 2em; }
.ng_int h2 { font-size:3em; text-align: center; }
.ng_int .donut-chart.d1, .ng_int .donut-chart.d2, .ng_int .donut-chart.d3 { background: #c1c6c8; }
.ng_int .donut-label { color:#595959; font-size: 1.5em; text-align: center; padding: 1em 3em;}
.ng_int .donut-chart .chart-center { padding-top: 50px; text-align: center; }
.donut-chart.d1 .slice.one { clip: rect(0 200px 100px 0); -webkit-transform: rotate(180deg); transform: rotate(180deg); background: #71c5e8; }
.donut-chart.d1 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #71c5e8; }
.donut-chart.d1 .chart-center { color:#71c5e8; }
.donut-chart.d2 .slice.one { clip: rect(0 200px 100px 0); -webkit-transform: rotate(220deg); transform: rotate(220deg); background: #f1be48; }
.donut-chart.d2 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #f1be48; }
.donut-chart.d2 .chart-center { color:#f1be48; }
.donut-chart.d3 .slice.one { clip: rect(0 200px 100px 0); -webkit-transform: rotate(200deg); transform: rotate(200deg); background: #dc8633; }
.donut-chart.d3 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #dc8633; }
.donut-chart.d3 .chart-center { color:#dc8633; }

section.ng_learn { background-color:#f2f2f2; padding: 2em; border-top: #999999 1px solid; margin-bottom:0;}
.ng_learn h2 { font-size:3em; text-align: center; margin: 0 0 1em 0; }
.ng_learn .learn-item { width: 32%; text-align: center; }
.ng_learn .learn-icon { margin:0 auto; width: 200px; height: 200px; border-radius: 50%; background-color:#fff; overflow: hidden; position:relative; border: 3px #cccccc solid; }
.ng_learn .learn-icon img { position: absolute; top: 50%; transform: translateY(-50%); left: -150px; }
.ng_learn .learn-item p { color: #595959; font-size: 1.5em; text-align: center; padding: 1em 3em; }

section.ng_outlook { background: url('/-/media/Resource Media Content/Education/infographic-next-gen/outlook.jpg') no-repeat; color:#fff;  padding: 4em; }
.ng_outlook h2 { color:#fff; font-size: 4em; }
.ng_outlook p { color:#fff; font-size:1.75em; width: 50%;}

section.ng_thinks { padding: 2em; }
.ng_thinks h2 { font-size: 3em; text-align: center; }
.ng_thinks .bar { width: 370px; height: 400px; position: relative; overflow: hidden; padding-top: 30px;}
.st0_a{fill:#DC8633;}
.ng_thinks .bar.panels .bar-detail .perc { color:#DC8633; }
.st0_b{fill:#72bde0;}
.ng_thinks .bar.update .bar-detail .perc { color:#72bde0; }
 .st0_c{fill:#f1be48;}
 .ng_thinks .bar.relations .bar-detail .perc { color:#f1be48; }
    .st1{fill:none;stroke:#666666;stroke-width:0.5;stroke-miterlimit:10;}
    .st2{fill:none;stroke:#737373;stroke-miterlimit:10;}
    .st3{fill:none;stroke:#666666;stroke-miterlimit:10;}
    .st4{fill:#666666;}
    .st5{font-family:'Lato-Light';}
    .st6{font-size:7.4528px;}
    .st7{fill:none;stroke:#D48033;stroke-miterlimit:10;}
    .ng_thinks .bar-detail { position: absolute; padding-left: 40px; width: 230px;}
    .ng_thinks .bar-detail p { color:#fff; }
    .ng_thinks .bar-detail .perc { font-size:4em; color:#fff; }
    .ng_thinks .bar-detail .blue { color:#00558c; font-weight: 700; }

    section.ng_respond { background-color:#f2f2f2; padding: 2em; border-top: #999999 1px solid; border-bottom: #999999 1px solid;}
    .ng_respond h2 { font-size: 3em; text-align: center; }
   .ng_respond .resp-item { width: 24%; position: relative; }
   .ng_respond .resp-icon { margin:0 auto; width: 136px; height: 136px; border-radius: 50%; background-color:#fff; overflow: hidden; position:relative; border: 3px #cccccc solid; }
.ng_respond .resp-icon img { position: absolute; top: 50%; transform: translateY(-50%); left: -150px; }
.ng_respond .resp-item p { color: #595959; font-size: 1.2em; text-align: center; padding: 1em 2em; }

@media only screen and (max-width: 48em)        /* 768px */
{
    section { padding: 10px !important; }
    .flex-cont,.ng_matter .fig_contain, .shows-list { display: block; }
    p.top_dash, .resnew .module_hero .titles { padding:0; }
    section h2 { font-size:1.2em !important; }
    .ng_respond .resp-item, .ng_learn .learn-item, .ng_matter .fig { width: 100%; }
    .ng_outlook p, .ng_young p { font-size: 1em; width: 100%; }
    .show { opacity: 1; width: 100%; text-align: center; }
    .ng_young p.emph { margin-top: 20px; }
}