/* HC - Cloud ERP. JeGu 07/2  */

p.top_dash.head { font-size: 1.2em; position: relative; margin: 0 0 0 4em; padding-bottom: 50px; width: 70%;}
p.top_dash.head:before { margin-top: -30px; }
.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-size:2em; 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; }

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

 .column_one .module_article section.ap_circles { background: #002340 url('/-/media/Resource Media Content/Healthcare/infographic-cloud-erp/mid-hero.jpg') no-repeat center  top; border-bottom:0; padding: 0 30px 0 0; }
section.ap_circles p { font-size: 2vw; color:#72b9dc; top: 50%; transform: translateY(-50%); position: absolute; padding: 0 1.5em; }
.ap_circles .circle-item { width: 32vw; height: 32vw; max-width: 389px; max-height: 389px; margin-right: -30px; display: inline-block; border: #fff 1px solid; position: relative; border-radius: 50%; vertical-align: top;}
.ap_circles .circle-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; }

section.ap_hover {  }
.ap_hover .hover-box { position: relative; }
.ap_hover .hover-box svg { min-height: 560px; }
.ap_hover .hover-box-out { width: 100%; height: 100%; position: absolute; z-index: -1; }
.ap_hover .rect, .ap_hover .rectext { display: none; }
.ap_hover .rectext { line-height: 1.2; position: absolute; text-align: left; color:#264a85; font-size: 1.25em; width: 260px; padding: 20px; } 
.ap_hover .rectext1 { left: 0; top: 0; font-size: 1em; }
.ap_hover .rectext2 { left: 0; bottom: 0; font-size: 1.15em; }
.ap_hover .rectext3 { right: 0; bottom: 0; font-size: 1.1em;}
.ap_hover .rectext4 { right: 0; top: 0; font-size: 1.1em; }
.ap_hover .rectext-title { display: none; }
 .column_one .module_article section.ap_takeaways { background-color: #fff;  }
 .column_one .ap_takeaways h2 { font-weight: 300; font-size: 2em; text-align: center; margin-bottom: 30px;}
.ap_takeaways p.sub { text-align: left; font-size: 1.25em; margin-bottom: 30px;}
 .column_one .ap_takeaways h3 { color:#e78c0a; font-weight: 300; margin:20px 0 5px 0; padding:0; }
.ap_takeaways .take-item { width: 33%; position: relative; }
.ap_takeaways .take-icon { margin:0 auto; width: 126px; height: 126px; border-radius: 50%; background-color:#fff; overflow: hidden; position:relative; border: 1px #cccccc solid; }
.ap_takeaways .take-icon p { font-size: .45em; line-height: .75; }
.ap_takeaways .take-icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 .column_one .module_article section.ap_references { background-color: #fff; text-align: left; }
 .column_one .ap_references h2 { font-size: 1em; color:#666; text-transform: uppercase; }
.ap_references a { font-size: .75em; /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media only screen and (min-width: 76.25em)
{
	section.ap_circles .circle-item { width: 389px; height: 389px; }
	section.ap_circles p { font-size: 1.5em; }
}

@media only screen and (max-width: 76.25em)     /* 1220px */
{
     .module_hero h1 { font-size: 5vw; }
    p.top_dash.head { font-size: 2vw; padding-top: 20px;}
    p.top_dash.head:before, .top_dash:before { height:4px; margin-top:-20px ; }
     .module_hero .titles { width: 95%; }

}

@media only screen and (max-width: 48em) {
	.flex-cont { display: block !important; }
     .module_hero .titles { position: static !important; margin: 0; }
     .module_hero h1 { color:#005584; padding: 10px 0; font-size:1em; }
     .module_hero .titles { position: static !important; margin: 0; padding: 0; }
    p.top_dash.head { color:#005584; font-size: 1em; margin:1em 0; padding: .5em; width: 100%; }
    section.ap_circles .circle-item{ width: 100%; display: block; border: 0; margin-right:0; border-radius:0; height:auto;}
     .column_one { margin:0;  }
     .column_one .module_article section { padding:1em .5em; }
     .column_one h2 { font-size: 1.5em; }
    .ap_engage .engage-item, .ap_takeaways .take-item { width: 100%; text-align: center; }
     .column_one p.head_descr { font-size: 1em; }
    rect.rect { width: 0 !important; height:0 !important; }
    .ap_hover .hover-box svg { display: none; }
    section.ap_circles p { position: static; transform: none; font-size: 1.25em; }
    .ap_engage .engage-item p { font-size: 1.25em; }
    .ap_takeaways p.sub { font-size: 1em; }
    .ap_hover .rectext { display: block; position: static; width: 100%; color: #808080; padding: 0; margin-bottom: 1em; font-size: 1em; line-height: 1.5; }
    .ap_hover .rectext-title { display: block; font-weight: 700; margin-bottom: .75em; color: #00568c; font-size: 1.25em;}
}