/* HE - Academic Portfolio. JeGu 06/15  */

p.top_dash.head { font-size: 1.5em; color: #005584; position: relative; margin: 0 2.7em; padding: 20px 0; width: 80%;}
.top_dash { position: relative; }
.top_dash:before { position: absolute; width: 130px; height: 14px; background-color: #EEBB47; content: ""; display: table; margin-top: -20px; } 

.flex-cont { display: flex; justify-content: space-between; }
/* sections */
 .column_one .module_article section { background-color:#f2f2f2; border-bottom: 1px #979797 solid; color:#005584; padding: 6em 4em 4em 4em; text-align: center; margin-bottom:0; }
 .column_one h2 { font: 400 normal 1.875em/1 'IBM Plex Sans'; text-align: left; padding-right: 2em; }
 .column_one h3 { font-size:1.75em; padding: 1em 0;}
 .column_one p.head_descr { font-size: 1.45em; text-align: left; }
 .module_hero figcaption h1 { width: 80%; }

.ap_build h3 { text-transform: uppercase; font-size: 1.5em; font-weight: 300; }
.ap_build .fig_contain { display: flex; margin: 50px 0 70px 0;}
.ap_build .fig { width: 24%; border-right: 1px #979797 solid; text-align: center; position: relative; overflow: hidden; }
.ap_build .fig:last-child { border-right:0; }
.ap_build .fig.donut { overflow: visible; }
.donut-chart { position: relative; border-radius: 50%; overflow: hidden; margin: 0 auto; width: 200px; height: 200px; background: #dedede; }
.donut-chart.d0 .slice.one { clip: rect(0 200px 100px 0); -webkit-transform: rotate(355deg); transform: rotate(305deg); background: #fff url('/-/media/Resource-Media-Content/Education/infographic-academic-portfolio/bg-blu.svg'); }
.donut-chart.d0 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #78beef; }
.donut-chart.d1 .slice.one { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #dfbe00; }
.donut-chart.d1 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(215deg); transform: rotate(215deg); background: #dfbe00; }
.donut-chart.d2 .slice.one { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #d18300; }
.donut-chart.d2 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(250deg); transform: rotate(250deg); background: #d18300; }
.donut-chart.d3 .slice.one { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #274987; }
.donut-chart.d3 .slice.two { clip: rect(0 100px 200px 0); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: #274987; }
.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: normal 200 1.5em/85px 'IBM Plex Sans'; color:#727272; }
.donut-chart.d0 span  { font-size: 1.3em; }
.donut-chart span.small { font-size:20px; }
.donut-chart span.block { display:block; }
.donut-label { display: block; padding: 20px 50px 0 50px; font-size: 1.1em; color:#727272; line-height:1.2; }
.donut-label.d0 em { color:#78beef; }
.donut-label.d1 em { color:#dfbe00; }
.donut-label.d2 em { color:#d18300; }
.donut-label.d3 em { color:#274987; }
.donut-label em { font-weight: 700; font-style: normal; }

section.ap_eval {  }
.ap_eval .eval-item { width: 24%; position: relative; }
.ap_eval .eval-icon { margin:0 auto; width: 126px; height: 126px; border-radius: 50%; background-color:#fff; overflow: hidden; position:relative; border: 3px #cccccc solid; }
.ap_eval .eval-icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ap_eval .eval-item p { color: #78beef; font-size: 1.4em; text-align: center; padding: 1em 1.5em; }

 .column_one .module_article section.ap_quote { background: url('/-/media/Resource-Media-Content/Education/infographic-academic-portfolio/mid-hero.jpg'); height: 452px; border-bottom:0; padding-top: 4em; }
section.ap_quote p { font-size: 2.25em; color:#fff; }

section.ap_course {}
.ap_course .flex-cont { justify-content: space-around; }
.ap_course p, .ap_opp p, .ap_design p  { font-size: 1.8em; color:#274987; padding: 0 3em; }
.ap_course .course-item { width: 35%; text-align: left; align-self: flex-end; }
.ap_course span.line { display: block; color:#78beef; margin: .65em auto; font-size: 1.7em; font-weight: 700; }
.ap_course span.pop-left { margin-left: -21px; }
.ap_course span.mod { display: inline-block; }
.ap_course span.answer { border-top: 3px #dfbe00 solid; padding-top: .5em; color:#274987; }
.ap_course .num, .ap_opp .num, .ap_design .num { position:relative; margin-left: .85em; padding-left: 55px; }
.ap_course .num:before, .ap_opp .num.two:before, .ap_design .num.three:before { font-size: 1em; padding: 15px 22px; top: 3px; left: -30px; display: block; position:absolute; width: 65px; height: 65px; color:#fff; border-radius: 50%; background-color:#dfbe00; }
.ap_course .num.one:before { content: "1"; }

.ap_opp .num.two:before { content: "2"; }
.module_article .ap_opp figure { padding: 2.5em; margin: 0;}
.module_article .ap_opp figure figcaption { font-size: 1.3em; font-weight: 700; color:#274987; padding:0 0 2em 0; text-align: left; }
.ap_opp #cost_graph svg { min-height: 471px; }

.ap_data {  }
.ap_data .flex-cont { flex-wrap: wrap; justify-content: space-around; padding-top: 2em; }
.ap_data .data-item { width: 33%; position: relative; }
.ap_data .data-icon { margin:0 auto; width: 126px; height: 126px; border-radius: 50%; background-color:#fff; overflow: hidden; position:relative; border: 3px #cccccc solid; }
.ap_data .data-icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ap_data .data-item p { color: #78beef; font-size: 1.5em; text-align: center; padding: 1em 2em; line-height: 1.4;}
.ap_data .data-item p em { font-style: normal; color: #e6b347; font-weight: 700; }

.ap_design .num.three:before { content: "3"; }
.ap_design .design-item h3 { font-size:2em; padding: 0 2.5em; }
.ap_design .flex-cont { flex-wrap: wrap; padding-top: 2em; overflow: hidden; }
.ap_design .design-item { width: 50%; padding: 3em; position: relative; min-height: 370px; overflow: hidden;}
.ap_design .design-item div { position: absolute; }
.ap_design .design-item:nth-child(1), .ap_design .design-item:nth-child(2)  { border-bottom: 1px #979797 solid; padding-top:0; }
.ap_design .design-item:nth-child(1), .ap_design .design-item:nth-child(3)  { border-right: 1px #979797 solid; }
.ap_design .design-item:nth-child(2), .ap_design .design-item:nth-child(3) { padding-bottom:0; }
.ap_design .design-item:nth-child(1) { position: relative; }
.ap_design .design-item:nth-child(1):after { content: ""; position: absolute; width: 60px; height: 60px; right:-30px; bottom:-30px; background-color:#f2f2f2; }
.ap_design .design-item ul { list-style: none; }
.ap_design .design-item li { text-align: left; font-size: 1.25em; text-indent: -1.3em; padding-left: .5em; } 
.ap_design .design-item li:before { color:#005584; content:"• "; margin-right: 10px; }

 .column_one .module_article section.ap_finalquote { background-color:#fff; }
.ap_finalquote p { font-size: 2.25em; color:#005584; }

 .column_one .module_article section.ap_contact { background-color:#005584; padding: 8em 0 8em 0;}
.ap_contact a { background-color:#fff; color:#005584; padding: 1em 2em; font-size: 1.75em; text-transform: uppercase; font-weight: 400; }

@media only screen and (max-width: 76.25em)     /* 1220px */
{
    .ap_opp #cost_graph svg { min-height: 320px; }
     .module_hero h1 { font-size: 5vw; }
    p.top_dash.head { font-size: 2vw; }
    p.top_dash.head:before { height:4px; }
     .module_hero .titles { width: 95%; }
    .fig_contain, .flex-cont { flex-wrap: wrap; }
    .ap_build .fig { width: 50%; padding-bottom: 2em;}
    .ap_build .fig:nth-child(2) { border-right: 0; }
    .ap_design .design-item { overflow: visible; }
    .ap_design .design-item div { position: static; }
}

@media only screen and (max-width: 48em) /* 768px */
{
    .ap_opp #cost_graph svg { min-height: 200px; }
	 .column_one h2 { font-size: 2em; }
     .column_one p.head_descr { font-size: 1.25em; }
    .ap_course .num:before, .ap_opp .num.two:before, .ap_design .num.three:before { width: 50px; height: 50px; }
    .ap_course .course-item { width: 100%; margin-bottom: 3em;}
     .module_hero .titles { position: static !important; margin: 0; padding: 0; }
     .module_hero h1 { color:#005584; padding: 10px 0; font-size: 1em; }
     .module_hero h2 { margin-left:0; font-size: .75em; }
    p.top_dash.head { font-size: 1.25em; margin:0; width: 100%; }
    .fig_contain, .flex-cont { display: block !important; }
    .ap_build .fig, .ap_eval .eval-item, .ap_data .data-item, .ap_design .design-item { width: 100%; border:0 !important; }
     .column_one .module_article section { padding: 2em 1em; }
     .column_one .module_article section.ap_quote { height: auto; }
    section.ap_quote p, .ap_course p, .ap_opp p, .ap_design p { font-size: 1.25em; padding:0; }
    .ap_build .fig_contain { margin:0; }
    .ap_course .num, .ap_opp .num, .ap_design .num { padding-left: 25px; }
    .ap_design .design-item h3, .ap_finalquote p { font-size: 1.5em; text-align:left; }
    .ap_design .design-item h3,.ap_design .design-item { padding: 0; }
    .ap_design .design-item { min-height: auto; }
    .module_article .ap_opp figure { padding:0; }
}

@media only screen and (max-width: 30em)        /* 480px */
{
    .ap_opp #cost_graph svg { min-height: 180px; }
}