@charset "UTF-8";
/* CSS Document */
.diagramfeature, .diagramslice, .pageheadfeature, .userdiagfeature, .diagramlogo, .diagramlogo img, .tooltip, #slide_01, #slide_02, #slide_03, #slide_04 {
  -o-transition: .35s;
  -ms-transition: .35s;
  -moz-transition: .35s;
  -webkit-transition: .35s;
  transition: .35s;
}
.diagramsection {
  background: top left repeat-y url("../images/twocolumnvertical.png") fixed #CDCDCD;
  text-align: center;
}
#staticdiagram {
  padding: 25px 0px;
  margin: 0 auto;
  width: 840px;
  height: 650px;
  position: relative;
}
#staticdiagram h2 {
  text-align: center;
  font-size: 28px;
  margin: 0;
  padding-top: 35px;
  font-weight: 800;
  color: #0e8d3d;
}
.fixedslide {
  margin: 0 auto;
  pointer-events: none;
  height: 560px;
  position: absolute;
}
#staticdiagram #slide_01 {
  width: 410px;
  left: 215px;
  margin: 0 auto 0 auto;
  z-index: 5;
}
.diagramfeature {
  width: 60px;
  padding: 7.5px 0 7.5px 0;
  position: absolute;
  pointer-events: initial;
  opacity: 0.2;
}
.diagramlogo {
  width: 410px;
  position: absolute;
  pointer-events: initial;
  opacity: 0.6;
}
.diagramlogo img {
  margin: 15px auto 0px;
}
.diagramlogo:hover {
  opacity: 1;
}
.diagramlogo:hover img {
  margin: 0px auto 15px;
}
.qchiharmoni {
  top: 80px;
}
.qchiharmoni img {
  width: 300px;
  height: 66px;
}
.qchiaffiniti {
  top: 245px;
}
.qchiaffiniti img {
  width: 253px;
  height: 66px;
}
.qchiaffiniti:hover img {
  padding: 0px auto 15px;
}
.tooltip {
  position: absolute;
  top: -45px;
  left: -30px;
  width: 118px;
  height: 24px;
  background-color: #c9631f;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
}
.tooltip:after {
  background: url("../images/select_arrow_o.png") no-repeat center top;
  width: 108px;
  height: 6px;
  margin-top: 4px;
}
.diagramfeature:hover {
  padding: 0 0 30px 0;
  opacity: 1;
}
.diagramfeature:hover > .tooltip {
  opacity: .9;
  top: -20px;
}
.diagramfeature img {
  width: 60px;
  height: auto;
}
.qcompliance {
  top: 155px;
  left: 43px;
}
.qresults {
  top: 155px;
  left: 109px;
}
.qreports {
  top: 155px;
  left: 175px;
}
.qcalendar {
  top: 155px;
  left: 241px;
}
.qpartners {
  top: 155px;
  left: 307px;
}
.qdashboard {
  top: 192px;
  left: 76px;
}
.qfinance {
  top: 192px;
  left: 142px;
}
.qplanning {
  top: 192px;
  left: 208px;
}
.qworkflow {
  top: 192px;
  left: 274px;
}
#staticdiagram #slide_02 {
  width: 433px;
  left: 204px;
  margin: 0 auto 0 auto;
  z-index: 4;
}
.qchisection01 {
  position: absolute;
  top: 45px;
}
.qchisection01 img {
  width: 433px;
  height: auto;
}
#staticdiagram #slide_03 {
  width: 690px;
  left: 75px;
  margin: 0 auto 0 auto;
  z-index: 3;
}
.diagramslice {
  width: 310px;
  height: 231px;
  position: absolute;
  pointer-events: initial;
}
.diagramslice img {
  width: 310px;
  height: 231px;
  position: absolute;
  pointer-events: initial;
}
.supportsl {
  top: 14px;
  left: 0;
  padding: 10px 0 0 30px;
}
.supportsl:hover {
  padding: 0 30px 10px 0;
}
.managementsl {
  top: 14px;
  left: 351px;
  padding: 10px 0 0 0;
}
.managementsl:hover {
  padding: 0 0 0 30px;
}
.softwaresl {
  top: 241px;
  left: 0;
  padding: 0 0 0 30px;
}
.softwaresl:hover {
  padding: 10px 30px 0 0;
}
.processsl {
  top: 241px;
  left: 351px;
  padding: 0;
}
.processsl:hover {
  padding: 10px 0 0 30px;
}
#staticdiagram #slide_04 {
  width: 840px;
  margin: 0 auto 0 auto;
  z-index: 2;
}
.qchisection02 {
  position: absolute;
  top: 0;
}
.qchisection02 img {
  width: 840px;
  height: 560px;
}
#staticdiagram #slide_01.initial {
  margin-top: -100px;
}
#staticdiagram #slide_02.initial {
  margin-top: -50px;
}
#staticdiagram #slide_03.initial {
  margin-top: 50px;
}
#staticdiagram #slide_04.initial {
  margin-top: 100px;
}
@media screen and (max-width:949px) {
  /* DIAGRAM SECTION --------------- */
  #staticdiagram {
    width: 630px;
    height: 487.5px;
  }
  #staticdiagram h2 {
    font-size: 21px;
  }
  .fixedslide {
    height: 420px;
  }
  #staticdiagram #slide_01 {
    width: 307.5px;
    left: 161.25px;
  }
  .diagramfeature {
    width: 45px;
    padding: 6px 0 6px 0;
    position: absolute;
    pointer-events: initial;
    opacity: 0.2;
  }
  .diagramlogo {
    width: 307.5px;
    position: absolute;
    pointer-events: initial;
    opacity: 0.6;
  }
  .diagramlogo img {
    margin: 11.25px auto 0px;
  }
  .diagramlogo:hover {
    opacity: 1;
  }
  .diagramlogo:hover img {
    margin: 0px auto 11.25px;
  }
  .qchiharmoni {
    top: 60px;
  }
  .qchiharmoni img {
    width: 225px;
    height: 49.5px;
  }
  .qchiaffiniti {
    top: 183.75px;
  }
  .qchiaffiniti img {
    width: 189.75px;
    height: 49.5px;
  }
  .qchiaffiniti:hover img {
    padding: 0px auto 11.25px;
  }
  .tooltip {
    top: -30px;
    left: -37px;
  }
  .diagramfeature:hover {
    padding: 0 0 22.5px 0;
    opacity: 1;
  }
  .diagramfeature:hover > .tooltip {
    opacity: .9;
    top: -15px;
  }
  .diagramfeature img {
    width: 45px;
    height: auto;
  }
  .qcompliance {
    top: 116.25px;
    left: 32.25px;
  }
  .qresults {
    top: 116.25px;
    left: 81.75px;
  }
  .qreports {
    top: 116.25px;
    left: 131.25px;
  }
  .qcalendar {
    top: 116.25px;
    left: 180.75px;
  }
  .qpartners {
    top: 116.25px;
    left: 230.25px;
  }
  .qdashboard {
    top: 144px;
    left: 57px;
  }
  .qfinance {
    top: 144px;
    left: 106.5px;
  }
  .qplanning {
    top: 144px;
    left: 156px;
  }
  .qworkflow {
    top: 144px;
    left: 205.5px;
  }
  #staticdiagram #slide_02 {
    width: 324.75px;
    left: 153px;
  }
  .qchisection01 {
    position: absolute;
    top: 33.75px;
  }
  .qchisection01 img {
    width: 324.75px;
    height: auto;
  }
  #staticdiagram #slide_03 {
    width: 517.5px;
    left: 56.25px;
  }
  .diagramslice, .diagramslice img {
    width: 232.5px;
    height: 173.25px;
  }
  .supportsl {
    top: 10.5px;
    padding: 7.5px 0 0 22.5px;
  }
  .supportsl:hover {
    padding: 0 22.5px 7.5px 0;
  }
  .managementsl {
    top: 10.5px;
    left: 263.25px;
    padding: 7.5px 0 0 0;
  }
  .managementsl:hover {
    padding: 0 0 0 22.5px;
  }
  .softwaresl {
    top: 180.75px;
    padding: 0 0 0 22.5px;
  }
  .softwaresl:hover {
    padding: 7.5px 22.5px 0 0;
  }
  .processsl {
    top: 180.75px;
    left: 263.25px;
  }
  .processsl:hover {
    padding: 7.5px 0 0 22.5px;
  }
  #staticdiagram #slide_04 {
    width: 630px;
  }
  .qchisection02 img {
    width: 630px;
    height: 420px;
  }
  #staticdiagram #slide_01.initial {
    margin-top: -75px;
  }
  #staticdiagram #slide_02.initial {
    margin-top: -37.5px;
  }
  #staticdiagram #slide_03.initial {
    margin-top: 37.5px;
  }
  #staticdiagram #slide_04.initial {
    margin-top: 75px;
  }
}
@media screen and (max-width:689px) {
  /* DIAGRAM SECTION --------------- */
  #staticdiagram {
    width: 294px;
    height: 250px;
  }
  #staticdiagram h2 {
    font-size: 14px;
    padding-top: 25px;
  }
  .fixedslide {
    height: 196px;
  }
  #staticdiagram #slide_01 {
    width: 143.5px;
    left: 75.25px;
  }
  .diagramfeature {
    width: 34.3px;
    padding: 5.25px 0 5.25px 0;
    background-size: auto 34.3px;
  }
  .diagramlogo {
    width: 143.5px;
  }
  .diagramlogo img {
    margin: 5.25px auto 0px;
  }
  .diagramlogo:hover img {
    margin: 0px auto 5.25px;
  }
  .qchiharmoni {
    top: 28px;
  }
  .qchiharmoni img {
    width: 105px;
    height: 23.1px;
  }
  .qchiaffiniti {
    top: 85.75px;
  }
  .qchiaffiniti img {
    width: 88.55px;
    height: 23.1px;
  }
  .qchiaffiniti:hover img {
    padding: 0px auto 5.25px;
  }
  .tooltip {
    top: -45px;
    left: -48px;
  }
  .diagramfeature:hover {
    padding: 0 0 10.5px 0;
  }
  .diagramfeature:hover > .tooltip {
    top: -27px;
  }
  .diagramfeature img {
    width: 21px;
  }
  .qcompliance {
    top: 50.25px;
    left: 15.05px;
  }
  .qresults {
    top: 50.25px;
    left: 38.15px;
  }
  .qreports {
    top: 50.25px;
    left: 61.25px;
  }
  .qcalendar {
    top: 50.25px;
    left: 84.35px;
  }
  .qpartners {
    top: 50.25px;
    left: 107.45px;
  }
  .qdashboard {
    top: 63.2px;
    left: 26.6px;
  }
  .qfinance {
    top: 63.2px;
    left: 49.7px;
  }
  .qplanning {
    top: 63.2px;
    left: 72.8px;
  }
  .qworkflow {
    top: 63.2px;
    left: 95.9px;
  }
  #staticdiagram #slide_02 {
    width: 151.55px;
    left: 71.4px;
  }
  .qchisection01 {
    top: 15.75px;
  }
  .qchisection01 img {
    width: 151.55px;
  }
  #staticdiagram #slide_03 {
    width: 241.5px;
    left: 26.25px;
  }
  .diagramslice, .diagramslice img {
    width: 108.5px;
    height: 80.85px;
  }
  .supportsl {
    top: 4.9px;
    padding: 3.5px 0 0 10.5px;
  }
  .supportsl:hover {
    padding: 0 10.5px 3.5px 0;
  }
  .managementsl {
    top: 4.9px;
    left: 122.85px;
    padding: 3.5px 0 0 0;
  }
  .managementsl:hover {
    padding: 0 0 0 10.5px;
  }
  .softwaresl {
    top: 84.35px;
    padding: 0 0 0 10.5px;
  }
  .softwaresl:hover {
    padding: 3.5px 10.5px 0 0;
  }
  .processsl {
    top: 84.35px;
    left: 122.85px;
  }
  .processsl:hover {
    padding: 3.5px 0 0 10.5px;
  }
  #staticdiagram #slide_04 {
    width: 295px;
  }
  .qchisection02 img {
    width: 294px;
    height: 196px;
  }
  #staticdiagram #slide_01.initial {
    margin-top: -35px;
  }
  #staticdiagram #slide_02.initial {
    margin-top: -17.5px;
  }
  #staticdiagram #slide_03.initial {
    margin-top: 17.5px;
  }
  #staticdiagram #slide_04.initial {
    margin-top: 35px;
  }
}