@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;800&display=swap');

/* RESETS ------------------------  */


*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0px;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  outline: none;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  padding: 0px;
  margin: 0px;
}
#root, #__next {
  isolation: isolate;
}
/* MISC */ ::selection, ::-moz-selection {
  background: #333333;
  color: #FFFFFF !important;
}
body {
  line-height: 1.2;
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, html {
  height: 100%;
  overscroll-behavior: none;
  min-width: 320px;
}
ul {
  list-style: none;
  font-size: 0;
}
.policy ol li {
  list-style-type: decimal;
}
blockquote, q {
  quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
  border: none;
  outline:none;
}

/* GENERAL -----------------------  */

.clearfix::after, .clearall::after {
  content: "";
  clear: both;
  display: block;
}
.ceedee {
  display: none;
}

/* UNIVERSAL FONT SIZINGS --------- */

emphasis {
	font-style: italic;
}
h2 {
  font-size: 38px;
  font-weight: 800;
}
h3 {
  font-size: 26px;
  font-weight: 600;
}
h4 {
  font-size: 15px;
  font-weight: 600;
}
p, ul, li {
  font-size: 18px;
  font-weight: 400;
}
.statementh3 {
	color:#6901A0;
	margin-top: 25px;
}

/* FONT COLOURING ---------------- */

.greentext {
  color: #6901A0 !important;
}
.lightgreentext {
  color: #333333 !important;
}
.greytext {
  color: #A8ADB1 !important;
}
.darkgreytext {
	color: #797979 !important;
}
.blacktext, .navmarked {
  color: #000000 !important;
}

/* MOBILE START FIX -------------- */

#mobilemenubutton {
  display: none;
  z-index: 5003;
}

/* HEADER SECTION ---------------- */

header {
  position: fixed;
  padding: 10px 25px;
  z-index: 5000;
  width: 100%;
  margin: 0;
  background-color: #FFFFFF;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .1), 0 3px 2px 0 rgba(0, 0, 0, .1);
}
#navwrapper {
  width: 1720px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: 150px 1fr 250px;
  grid-template-rows: 60px auto auto auto;
  align-items: center;
  pointer-events: all;
}
header h1 {
  grid-column: 1 / span 1;
  grid-row: 1 / 2;
  text-indent: -32000px;
  height: 45px;
  background: center left no-repeat url(../images/qchiheadlogo.png);
  background-size: contain;
  z-index: 5002;
}
header h1 a {
  display: block;
}
.menubutton {
  justify-self: stretch;
  padding: 23px 15px 12px 10px;
  margin: 0px 25px 0px 6px;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 14px;
  background: right 35px no-repeat url("../images/menudroparrow.png");
  background-size: 10px auto;
  color: #6901A0;
  cursor: pointer;
  grid-row: 1 / 2;
}
.menubutton:hover {
  color: #333333;
}
#featurebuttons {
  grid-column: 3 / span 1;
  grid-row: 1 / 2;
  margin: 0px 0px 0px auto;
  z-index: 5002;
}
#featurebuttons a {
  padding: 9px 15px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 11px;
  float: right;
  text-transform: uppercase;
  margin: 0px 5px 0px 0px;
  color: #FFFFFF;
}
#featurebuttons a:first-of-type {
  margin-right: 0px;
}
#tryqchi {
  border: 1px solid #c9631f;
  background-color: #c9631f;
}
#tryqchi:hover {
  background-color: #FFFFFF;
  color: #c9631f
}
#qchiprices {
  border: 1px solid #333333;
  background-color: #333333;
}
#qchiprices:hover {
  background-color: #FFFFFF;
  color: #333333
}

/* TOP LEVEL NAVIGATION ---------- */

#menuitems {
  width: 1720px;
  grid-column: 1 / span 3;
  grid-row: 1 / 5;
  z-index: 5001;
  display: grid;
  grid-template-columns: 150px auto auto auto auto auto auto 1fr 220px;
  grid-template-rows: 60px auto auto auto auto;
  margin: 0px auto;
}
#nav01 {
  grid-column: 2 / span 1;
}
#nav06 {
  grid-column: 6 / span 1;
}
#nav02 {
  grid-column: 3 / span 1;
}
#nav03 {
  grid-column: 4 / span 1;
}
#nav04 {
  grid-column: 5 / span 1;
}
#nav05 {
  grid-column: 7 / span 1;
}

/* DROP MENUS -------------------- */

.megamenu {
  grid-column: 1 / span 8;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #FFFFFF;
}
#menu01, #menu02, #menu03, #menu04, #menu05, #menu06 {
  display: none;
  width: 1555px;
  margin: 10px auto 0 165px;
}
.column {
  margin-right: 30px;
  float: left;
}
.column img {
  width: 30px;
  height: auto;
  margin-bottom: 2px;
}
.column li {
  margin: 0px 0px 10px 0px;
}
.column ul:first-of-type {
  margin-bottom: 0px;
}
.column li:last-of-type {
  margin-bottom: 10px;
}
.column li:hover .optiontitle, .current .optiontitle {
  color: #333333;
}
.column li:hover img, .current img {
  opacity: 1
}
.optiontitle {
  font-weight: 600;
  font-size: 14px;
  color: #808389;
}
.optiontext {
  font-weight: 400;
  font-size: 12px;
  margin-top: 5px;
  color: #000000;
}
.qchioption .optiontext, .qchioption .optiontitle {
  width: 140px
}
.onecolumn {
  width: 220px
}
.twocolumn {
  width: 470px
}
.threecolumn {
  width: 720px
}
.fourcolumn {
  width: 970px
}
.fivecolumn {
  width: 970px;
}
.lastcolumn {
  float: right;
  margin-right: 0
}
.columntitle, .sectiontitle {
  font-weight: 600;
  font-size: 12px;
  color: #6901A0;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #A8ADB1
}
.closemenubutton {
  display: block;
  text-indent: -32000px;
  text-align: center;
  margin-top: 15px;
  height: 30px;
  background: url(../images/closemenu.png) center top no-repeat;
  background-size: 15px auto;
  opacity: .6
}
.closemenubutton:hover {
  opacity: 1
}

/* BIG BUTTONS ------------------- */

.bigbuttons {
  width: 1280px;
  display: grid;
  grid-template-columns: auto 620px 40px 620px auto;
  grid-template-rows: 5px auto 25px;
  float: left;
}
.bigbuttons a {
  margin: 0px;
  display: block;
  padding: 25px 25px 60px 25px;
  color: #FFFFFF;
  background-color: #6901A0;
  border-radius: 10px;
  position: relative;
}
.bigbuttons span {
  margin: 0px;
  display: block;
  padding: 24px 24px 24px 24px;
  color: #000000;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #333333;
  position: relative;
}
.leftbutton {
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
}
.rightbutton {
  grid-column: 4 / span 1;
  grid-row: 2 / 3;
}
.buttonpic {
  float: left;
}
.buttonpic img {
  width: 200px;
  height: auto;
  margin: 0px;
  padding: 0px;
}
.buttonlogo img {
  height: 90px;
  width: auto;
  margin: 0px 0px 5px 225px;
}
.bigbuttons span .buttonlogo img {
  filter: invert(76%) sepia(95%) saturate(3610%) hue-rotate(142deg) brightness(97%) contrast(89%);
}
.buttonhead {
  font-weight: 600;
  font-size: 18px;
  margin: 0px 0px 5px 225px;
}
.buttontext {
  font-weight: 400;
  font-size: 14px;
  margin: 0px 0px 5px 225px;
}
.buttonlink {
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  border-radius: 3px;
  background-color: #333333;
  padding: 10px 20px;
  margin: 10px 0px 0px 225px;
  color: #FFFFFF;
  position: absolute;
  bottom: 25px;
}
.bigbuttons a:hover .buttonlink {
  background-color: #FFFFFF;
  color: #333333;
}

/* ADJUSTMENTS FOR SUBSCRIPTIONS BUTTONS */

.subsbigbuttons a {
  padding: 25px;
}
.subsbigbuttons .buttonlogo {
	float: left;
}
.subsbigbuttons .buttonlogo img {
	margin-left: 0px;
}
.subsbigbuttons .buttonlink {
	position: relative;
	float: right!important;margin: -40px 0px 0px 0px!important;
}

/* HOME HERO SECTION ------------- */

#homegridwrapper {
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr 400px 30px 400px 60px 400px 30px 400px 1fr;
  grid-template-rows: 120px auto 20px auto 50px;
}
.homegridintro {
  grid-column: 2 / span 7;
  grid-row: 2 / 3;
  padding: 0px 100px;
}
.homegridintro h3, .homegridintro h2, .homegridintro p {
	text-align: center!important;
}
.homegridintro p {
	padding: 0px 450px!important;
}
.fourcolumngrid-one {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
  margin: 0px auto;
  position: relative;
  padding-bottom: 80px;
}
.fourcolumngrid-two {
  grid-column: 4 / span 1;
  grid-row: 4 / 5;
  margin: 0px auto;
  position: relative;
}
.fourcolumngrid-three {
  grid-column: 6 / span 1;
  grid-row: 4 / 5;
  margin: 0px auto;
  position: relative;
}
.fourcolumngrid-four {
  grid-column: 8 / span 1;
  grid-row: 4 / 5;
  margin: 0px auto;
  position: relative;
  padding-bottom: 80px;
}
#homegridwrapper img {
  width: 400px;
  height: auto;
}
#homegridwrapper .qchiproductlogo {
  width: auto;
  height: 120px;
}
#homegridwrapper a {
  position: absolute;
  bottom: 0px;
}

/* TWO COLUMN -------------------- */

.twocolumngrid {
  background: top left repeat-y url("../images/twocolumnvertical.png") #6901A0 fixed;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr 510px 50px 510px 1fr;
  grid-template-rows: 10px auto 10px;
  grid-template-rows: 10px auto auto auto auto 20px;
	align: center;
}
.firsttwocolumn {
  grid-template-rows: 120px auto 10px auto auto 10px;
}
.twocolumnextrapad {
  grid-template-rows: 40px auto 80px;
}
.twocolumngrid-left {
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
  margin: auto 0px;
}
.twocolumngrid-right {
  grid-column: 4 / span 1;
  grid-row: 2 / 3;
  margin: auto 0px;
}
.firsttwocolumn .twocolumngrid-left, .firsttwocolumn .twocolumngrid-right {
  margin: auto;
}
.twocolumngrid img {
  width: 510px;
  height: auto;
}
.twocolumngrid .qchiproductlogo, #homegridwrapper .qchiproductlogo {
  width: auto;
  height: 120px;
  margin-bottom: 5px;
}
.qchicentrelogo {
  width: auto;
  height: 120px;
  margin: 0px auto 5px auto;
}
.lightgreengrid .qchiproductlogo, .qchicentrelogo {
  filter: invert(76%) sepia(95%) saturate(3610%) hue-rotate(142deg) brightness(97%) contrast(89%);
}
.extrainfopanel {
display: none;
grid-column: 2 / span 3;
grid-row: 4 / 5;
margin: auto;
padding: 0px;
}

/* INDIVIDUAL PAGE STYES --------- */

#productwrapper .twocolumngrid {
  background: none;
}
.homepage {
  background: top left repeat-y url("../images/twocolumnvertical.png") fixed, top right no-repeat url("../images/home-page.jpg") fixed #6901A0;
}
.affinitipage {
  background: top left repeat-y url("../images/twocolumnvertical.png") fixed, top right no-repeat url("../images/affiniti-page.jpg") fixed #6901A0;
}
.harmonipage {
  background: top left repeat-y url("../images/twocolumnvertical.png") fixed, top right no-repeat url("../images/harmoni-page.jpg") fixed #6901A0;
}
.ourstorypage {
  background: top left repeat-y url("../images/twocolumnvertical_green.png") fixed, top right no-repeat url("../images/ourstory-page.jpg") fixed #FFFFFF;
}
.deploymentpage {
  background: top left repeat-y url("../images/twocolumnvertical_green.png") fixed, top right no-repeat url("../images/deployment-page.jpg") fixed #FFFFFF;
}

/* SHARED FONT STYLING ----------- */

.twocolumngrid h2, #homegridwrapper h2 {
  text-align: left;
  font-weight: 800;
  margin: 20px 0px 0px 0px;
}
.twocolumngrid h4, #homegridwrapper h4 {
  text-align: left;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.twocolumngrid p, .twocolumngrid ul, #homegridwrapper p, #homegridwrapperul {
  text-align: left;
  font-weight: 400;
  margin: 20px 0px 0px 0px;
}
.twocolumngrid li, #homegridwrapper li {
  text-align: left;
  font-weight: 400;
  margin: 5px 0px 0px 15px;
  list-style-type: disc;
}
.twocolumngrid a, #homegridwrapper a {
  margin: 30px 15px 0px 0px;
  display: block;
  float: left;
  padding: 15px;
  font-weight: 800;
  color: #FFFFFF;
  background-color: #333333;
  border-radius: 6px;
  text-transform: uppercase;
}
.twocolumngrid a:hover, #homegridwrapper a:hover {
  color: #333333;
  background-color: #FFFFFF;
}
.inlinelink {
  margin: 0px!important;
  display: inline!important;
  float: none!important;
  padding: 0px!important;
  font-weight: 800!important;
  color: #6901A0!important;
  background-color: transparent!important;
  border-radius: none!important;
  text-transform: none!important;
}
.inlinelink:hover {
	color: #000000!important;
}

/* LIGHT BACKGROUND ADJUSTMENTS -- */

.lightgreengrid {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #CFE8D8 fixed;
}
.lightgreengrid h2 {
  color: #6901A0;
}
.lightgreengrid p, .lightgreengrid li {
  color: #000000;
}
.lightgreengrid a {
  background-color: #6901A0;
}
.lightgreengrid a:hover {
  background-color: #333333;
  color: #FFFFFF;
}

/* CLIENT SECTION ---------------- */

.clientgrid {
  background-color: #F5F5F5;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  text-align: center;
  padding: 60px 0px;
}
.clientgrid span {
  max-width: 1220px;
  display: block;
  margin: 0px auto;
}
.clientgrid h4 {
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  color: #797979;
  display: block;
  padding-bottom: 30px;
}
.clientgrid div {
  margin: 20px 20px;
  display: inline-block;
}
.clientgrid img {
  height: 60px;
  width: auto;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  background: url("../images/twocolumnvertical.png") top left repeat-y fixed, url("../images/testimonial-ground.jpg") bottom right no-repeat, #6901A0;
  display: grid;
  grid-template-columns: auto 140px	50px 760px auto;
  grid-template-rows: 40px auto 50px;
  align-content: start;
}
.testimonialgrid img {
  width: 140px;
  height: 140px;
  border-radius: 75px;
  border: 3px solid #FFFFFF;
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
  filter: drop-shadow(0px 2px 4px #000);
}
.testimonialtext {
  grid-column: 4 / span 1;
  grid-row: 2 / 3;
  margin: auto;
}
.testimonialtext h2 {
  color: #FFFFFF;
  text-align: left;
  font-weight: 600;
}
.testimonialtext p {
  color: #FFFFFF;
  text-align: left;
  margin: 10px 0px 0px 0px;
  padding: 0px;
}

/* COLUMN PAGE GRIDS --------------*/

.problemsheader {
  color: #6901A0;
	width: 100%;
	padding: 25px 100px 0px;
	text-align: center;
    background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
}
.problemssignoff {
  color: #6901A0;
	width: 100%;
	padding: 0px 100px 40px;
	margin-top: -50px;
	text-align: center;
    background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
}
.threecolumngrid, .smalltwocolumngrid {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
  display: grid;
  align-content: center;
  text-align: center;
  align-items: stretch;
  position: relative;	
}
.threecolumngrid {
  grid-template-columns: auto 270px 40px 270px 40px 270px auto;
  grid-template-rows: 50px auto 25px;
}
.threecolumngrid img {
  width: 270px;
  height: auto;
  margin: 15px auto 15px auto;
  filter: grayscale(1);
}
.threecolumngrid h3, .smalltwocolumngrid h3 {
  color: #6901A0;
  margin: 0px 0px 5px 0px;
}
h3.threecolumnheader {
  margin: 0px 0px 100px 0px;
  padding: 0px 25px;
}
.smalltwocolumngrid {
  grid-template-columns: auto 270px 40px 270px auto;
  grid-template-rows: 25px auto 50px;
}
.threecolumngridleft, .threecolumngridmid, .threecolumngridright, .smalltwocolumngridleft, .smalltwocolumngridright {
  grid-row: 2 / 3;
  text-align: center;
  justify-self: stretch;
	margin: 0px;
}
.greengridpanel {
	padding: 25px;
	background: #CFE8D8;
}
.lastthree {
  grid-template-rows: 25px auto 50px;
}
.threecolumngridleft, .smalltwocolumngridleft {
  grid-column: 2 / span 1;
}
.threecolumngridmid, .smalltwocolumngridright {
  grid-column: 4 / span 1;
}
.threecolumngridright {
  grid-column: 6 / span 1;
}
.threecolumngrid a:hover > .perspectivebutton {
  background-color: #333333;
}
.threecolumngrid a:hover > img {
  margin: 0px 0px 30px 0px;
  filter: none;
}

/* CALLENDLY SECTION --------------*/

.schedulersection {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
  margin: 0px auto;
  padding: 50px 30px;
	text-align: center;
  }
#headschedule {
  padding: 120px 30px 50px 30px;
}
.schedulersection h2, .schedulersection p {
  max-width: 650px;
  text-align: center;
  margin: 0px auto 10px auto;
}
.schedulersection h2 {
  color: #6901A0;
}
.schedulersection p {
  color: #000000;
}
.schedulersection h2 span, .schedulersection p span {
  white-space: nowrap;
}

/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
  display: grid;
  grid-template-columns: auto 270px 20px 270px 20px 270px 20px 270px 20px 270px 20px 270px auto;
  grid-template-rows: auto auto 50px;
  align-items: stretch;
  position: relative;
}
.sixcolumngrid img {
  width: 270px;
  height: auto;
  margin: 15px 0px 15px 0px;
  filter: grayscale(1);
}
.sixcolumngridone, .sixcolumngridtwo, .sixcolumngridthree, .sixcolumngridfour, .sixcolumngridfive, .sixcolumngridsix {
  grid-row: 2 / 3;
  text-align: center;
  justify-self: stretch;
}
.sixcolumngridone {
  grid-column: 2 / span 1;
}
.sixcolumngridtwo {
  grid-column: 4 / span 1;
}
.sixcolumngridthree {
  grid-column: 6 / span 1;
}
.sixcolumngridfour {
  grid-column: 8 / span 1;
}
.sixcolumngridfive {
  grid-column: 10 / span 1;
}
.sixcolumngridsix {
  grid-column: 12 / span 1;
}
.perspectivebutton {
  display: block;
  background-color: #6901A0;
  padding: 20px 30px;
  margin: 10px 35px 50px 35px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 6px;
  position: absolute;
  bottom: 0px;
  width: 200px;
}
.sixcolumngrid a:hover > .perspectivebutton {
  background-color: #333333;
}
.sixcolumngrid a:hover > img {
  margin: 0px 0px 30px 0px;
  filter: none;
}
.sixcolumngrid h2 {
  grid-row: 0 / 1;
  grid-column: 2 / span 11;
  text-align: center;
  margin: 40px auto 10px auto;
  color: #6901A0;
  align-self: stretch;
}
.sixcolumngrid h3 {
  text-align: center;
  color: #6901A0;
  margin: 0px 0px 5px 0px;
}
.sixcolumngrid p {
  text-align: center;
  margin: 0px 0px 80px 0px;
  padding: 0px;
  color: #000000;
}

/* SCHEDULE A CALL SECTION ------- */

#requestsection {
  width: 100%;
  text-align: center;
  background: #A8ADB1;
  background-image: url("../images/officebackgrounds/officebackground_09.jpg");
  background-position: center center;
  background-size: cover;
}
.gridoverlay {
  position: relative;
  top: 0;
  bottom: 0;
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") fixed;
}
.centrecontent {
  margin: 0 auto;
}
.requestbutton {
  display: inline-block;
  border: 1px solid #C9631F;
  border-radius: 6px;
  background-color: #C9631F;
  padding: 18px 24px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  margin: 150px auto;
}
.requestbutton:hover {
  background-color: #FFFFFF;
  color: #C9631F;
}
.requestbuttonsolo {
  display: inline;
  border: 1px solid #C9631F;
  border-radius: 6px;
  background-color: #C9631F;
  padding: 18px 24px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  margin: 50px auto;
	text-align: center;
}
.requestbuttonsolo:hover {
  background-color: #FFFFFF;
  color: #C9631F;
}

/* DISCLAIMER POP UP ------------- */

#disclaimerwrapper {
  position: fixed;
  bottom: -200px;
  right: 0;
  left: 0;
  text-align: center;
  background-color: transparent;
  z-index: 400;
}
.disclaimerdisplay {
  bottom: 25px !important;
}
#disclaimer {
  display: inline-block;
  padding: 30px;
  border-radius: 6px;
  margin: 0 auto;
  background: #000000;
  border: 1px solid #FFFFFF;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 400;
}
#closedisclaimer, #policyinfo {
  display: inline-block;
  padding: 15px;
  border-radius: 6px;
  margin-left: 10px;
}
#policyinfo {
  background-color: #FFFFFF;
  color: #6901A0;
}
#closedisclaimer {
  background-color: #333333;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 600;
}
#closedisclaimer:hover {
  background-color: #FFFFFF;
  color: #6901A0;
}
#policyinfo:hover {
  background-color: #333333;
  color: #FFFFFF;
}

/* FOOTER SECTION ---------------- */

#footermenuholder {
  background-color: #A8ADB1;
  margin-top: 0;
  color: #fff;
}
.footpanel {
  width: 1720px;
  margin: 0 auto;
  padding: 25px 0px;
  font-size: 12px;
}
.footcolumn {
  float: left;
  margin: 0 40px 20px 0;
  font-weight: 600;
  text-align: left;
}
.footcolumn p {
  width: auto;
  max-width: 100%;
  margin: 0 0 5px 0;
  font-weight: 800;
  color: #000;
  text-align: left;
}
.inlinep {
  margin-top: 25px !important;
}
.last {
  float: right;
  padding-left: 15px;
  border-left: 1px solid #FFFFFF;
  margin-right: 0;
}
.footcolumn a, .footpanel a, .footcurrent {
  display: block;
  padding: 5px 0;
  color: #666666;
}
.footcurrent {
  color: #FFFFFF;
}
.footcolumn a:hover, .footpanel a:hover {
  color: #000000;
}
#isomark img {
  width: 115px;
  height: auto;
  margin-top: 25px;
}

/* ARTICLES SECTION -------------- */

.articlepage {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
}
.articlelist {
  width: 1430px;
  margin: 0px auto 0px auto;
  padding-top: 80px;
  font-size: 0px;
  display: table;
}
.articlewrapper {
  width: 1020px;
  margin: 0px auto 0px;
  padding-bottom: 30px;
}
.articledisplay {
  width: 680px;
  margin: 80px auto 0px 0px;
  float: left;
}
.articledisplay:after {
  display: block;
  content: "";
  width: 240px;
  height: 1px;
  margin: 20px auto 15px 0px;
  background-color: #6901A0;
}
.sidebar {
  width: 300px;
  margin: 100px auto 0px 0px;
  padding: 0px 0px 0px 40px;
  float: right;
  border-left: 1px solid #333333;
}
.sidebar h3 {
  display: block;
  text-align: left;
  color: #333333;
  padding: 0px 0px 15px 0px;
  font-weight: 800;
}
.sidebarbutton {
  display: block;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  padding: 15px;
  background-color: #333333;
  color: #FFFFFF;
  margin: 15px 0px 0px 0px;
}
.sidebarbutton:hover {
  background-color: #C9631F;
  color: #FFFFFF;
}
.articlelist h2 {
  display: block;
  text-align: left;
  color: #6901A0;
  padding: 15px 0px 15px 20px;
  font-weight: 800;
}
.articledisplay h2 {
  display: block;
  text-align: left;
  color: #6901A0;
  padding: 15px 0px 10px 0px;
  font-weight: 800;
}
.article {
  width: 285px;
  text-align: left;
  padding: 20px;
  margin: 0px;
  display: table-cell;
}
.sidebar .article {
  padding: 20px 0px;
}
.article:after {
  display: block;
  content: "";
  width: 110px;
  height: 1px;
  background-color: #6901A0;
  margin: 15px auto 0px 0px;
  ;
}
.article img {
  width: 260px;
  height: auto;
  margin: 0px 0px 15px 0px;
}
.articledisplay img {
	width: 680px;
  margin: 0px 0px 20px 0px;
}
.article h3 {
  text-align: left;
  color: #6901A0;
  margin: 0px 0px 5px 0px;
  font-weight: 800;
}
.articledisplay h3 {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 20px 0px;
  font-weight: 400;
}
.article p {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 5px 0px;
  font-weight: 400;
}
.datedeets {
  width: 100%;
  margin: 15px auto 0px 0px;
  padding: 15px 0px;
}
.datedeets p {
  text-align: left;
  color: #6901A0;
  margin: 0px 0px 10px 0px;
  font-weight: 400;
}
.articledisplay p {
  text-align: left;
  color: #000000;
  margin: 0px 0px 15px 0px;
  font-weight: 400;
  line-height: 1.4;
}
.article:hover > img {
  margin: -15px 0px 30px 0px;
}
.article:hover > h3 {
  color: #333333;
}
.article:hover:after {
  width: 220px;
  background-color: #333333;
}
.artmorelink, .artdoclink, .articledisplay p a, .arttaglink {
	display: inline-block;
  color: #FFFFFF;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 15px 0px 15px 0px!important;
  font-weight: 600;
}
.artmorelink, .articledisplay p a, .arttaglink {
  background-color: #6901A0;
}
.artdoclink {
  background-color: #A8ADB1;
}
.artmorelink:hover, .artdoclink:hover, .articledisplay p a:hover, .arttaglink:hover {
  background-color: #333333;
}
.arttaglink {
	margin: 0px 5px 5px 0px;
	display: inline-block;
}

/* EXTRA INSIGHTS PANEL --------------- */

.extrainsightspanel {
	display: table;
	width: 1110px;
	text-align:left;
	padding: 30px 0px 0px 0px;
	margin: 0px 0px 0px -20px;
	vertical-align: top;
}
.extrainsightstitle{
	margin-left: 20px;
}
.extrainsightspanel a, .extrainsightspanel a:hover {
  margin: 0px;
  display: inline;
  color: #FFFFFF;
background-color: transparent; 
padding: 0px;
}
.extrainsightspanel .article {
	display: table-cell;
  margin: 0px;	
}
.extrainsightspanel .article:after {
  background-color: #FFFFFF;
}
.extrainsightspanel .article h3 {
	text-transform: none;
  color: #FFFFFF;
}
.extrainsightspanel .article p {
  color: #FFFFFF;
}
.extrainsightspanel .article img {
  margin: 0px 0px 15px 0px;
}
.extrainsightspanel .article:hover > img {
  margin: -15px 0px 30px 0px;
}

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 199px auto;
  }
.testimonialgrid {
  background-size: 199px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 199px auto, cover;
}

/* UNIVERSAL OVERRIDES ----------- */

a span, .footcurrent span {
  display: none;
}

/* TRANSITIONS ------------------- */

a, .menubutton, .optiontitle, .perspectivebutton, .sixcolumngrid img, .threecolumngrid img, .article h3, .article img, .article:after, .arttaglink {
  -o-transition: .15s;
  -ms-transition: .15s;
  -moz-transition: .15s;
  -webkit-transition: .15s;
  transition: .15s;
  transition-timing-function: ease-out;
}

@media screen and (max-width:1759px) {

/* UNIVERSAL FONT SIZINGS --------- */

h2 {
  font-size: 32px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 14px;
}
p, ul, li {
  font-size: 16px;
}

/* HEADER SECTION ---------------- */


#navwrapper {
  width: 1340px;
}

/* TOP LEVEL NAVIGATION ---------- */

#menuitems {
  width: 1340px;
}

/* DROP MENUS -------------------- */

#menu01, #menu03, #menu02, #menu04, #menu05, #menu06 {
  width: 1340px;
  margin: 10px auto 0 auto;
}

/* BIG BUTTONS ------------------- */

.bigbuttons {
  width: 1080px;
  grid-template-columns: auto 530px 20px 530px auto;
}
.buttonpic img {
  width: 150px;
}
.buttonlogo img {
  height: 70px;
  margin: 0px 0px 5px 175px;
}
.buttonhead {
  margin: 0px 0px 5px 175px;
}
.buttontext {
  margin: 0px 0px 5px 175px;
}
.buttonlink {
  margin: 10px 0px 0px 175px;
}

/* ADJUSTMENTS FOR SUBSCRIPTIONS BUTTONS */

.subsbigbuttons .buttonlink {
	margin: -30px 0px 0px 0px!important;
}

/* HOME HERO SECTION ------------- */

#homegridwrapper {
  grid-template-columns: 1fr 325px 10px 325px 20px 325px 10px 325px 1fr;
  grid-template-rows: 120px auto 10px auto 50px;
}
.homegridintro {
  padding: 0px 75px;
}
.homegridintro p {
	padding: 0px 250px!important;
}
#homegridwrapper img {
  width: 325px;
}
.qchiproductlogo {
  height: 90px!important;
}

/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  grid-template-columns: auto 215px 10px 215px 10px 215px 10px 215px 10px 215px 10px 215px auto;
}
.sixcolumngrid img {
  width: 215px;
}

.perspectivebutton {
  margin: 10px 5px 50px 5px;
}

/* FOOTER SECTION ---------------- */

.footpanel {
  width: 1340px;
}

/* ARTICLES SECTION -------------- */

.articlelist {
  width: 1370px;
}	
.article {
  width: 274px;
}
.article img {
  width: 254px;
}

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 175px auto;
  }
.testimonialgrid {
  background-size: 175px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 175px auto, cover;
}

}

@media screen and (max-width:1439px) {

/* HEADER SECTION ---------------- */

#navwrapper {
  width: 1180px;
}

/* TOP LEVEL NAVIGATION ---------- */

#menuitems {
  width: 1180px;
}

/* DROP MENUS -------------------- */

#menu01, #menu03, #menu02, #menu04, #menu05 {
  width: 1180px;
}
#menu01 .lastcolumn, #menu06 .lastcolumn {
  display: none;	
	}

/* BIG BUTTONS ------------------- */

.bigbuttons {
  width: 1180px;
  grid-template-columns: auto 580px 20px 580px auto;
}

/* HOME HERO SECTION ------------- */

#homegridwrapper {
  grid-template-columns: 1fr 400px 60px 400px 1fr;
  grid-template-rows: 120px auto 20px auto 10px auto 50px;
}
.homegridintro {
  grid-column: 2 / span 3;
  padding: 0px;
}
.homegridintro p {
	padding: 0px!important;
}
.fourcolumngrid-one {
  grid-column: 2 / span 1;
  grid-row: 6 / 7;
}
.fourcolumngrid-two {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
}
.fourcolumngrid-three {
  grid-column: 4 / span 1;
  grid-row: 4 / 5;
}
.fourcolumngrid-four {
  grid-column: 4 / span 1;
  grid-row: 6 / 7;
}

/* TWO COLUMN -------------------- */

.twocolumngrid {
  grid-template-columns: 1fr 400px 30px 400px 1fr;
  grid-template-rows: 10px auto 10px;
}
.firsttwocolumn {
  grid-template-rows: 120px auto 10px;
}
.lasttwocolumn {
  grid-template-rows: 10px auto 60px;
}
.twocolumnextrapad {
  grid-template-rows: 40px auto 70px;
}
.twocolumngrid img {
  width: 400px;
}

/* CLIENT SECTION ---------------- */

.clientgrid span {
  max-width: 1070px;
}
.clientgrid img {
  height: 50px;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  grid-template-columns: auto 100px	50px 660px auto;
}
.testimonialgrid img {
  width: 100px;
  height: 100px;
}

/* COLUMN PAGE GRIDS --------------*/

.threecolumngrid, .smalltwocolumngrid {
  background: top left repeat-y url("../images/new2023/twocolumnverticalgreen.png") #FFFFFF fixed;
  display: grid;
  align-content: center;
  text-align: center;
  align-items: stretch;
  position: relative;	
}
.threecolumngrid {
  grid-template-columns: auto 270px 40px 270px 40px 270px auto;
  grid-template-rows: 50px auto 25px;
}
.threecolumngrid img {
  width: 270px;
  height: auto;
  margin: 15px auto 15px auto;
  filter: grayscale(1);
}
.threecolumngrid h3, .smalltwocolumngrid h3 {
  color: #6901A0;
  margin: 0px 0px 5px 0px;
}
h3.threecolumnheader {
  margin: 0px 0px 100px 0px;
  padding: 0px 25px;
}
.smalltwocolumngrid {
  grid-template-columns: auto 270px 40px 270px auto;
  grid-template-rows: 25px auto 50px;
}
.threecolumngridleft, .threecolumngridmid, .threecolumngridright, .smalltwocolumngridleft, .smalltwocolumngridright {
  grid-row: 2 / 3;
  margin: 0px auto;
  text-align: center;
  justify-self: stretch;
}
.lastthree {
  grid-template-rows: 25px auto 50px;
}
.threecolumngridleft, .smalltwocolumngridleft {
  grid-column: 2 / span 1;
}
.threecolumngridmid, .smalltwocolumngridright {
  grid-column: 4 / span 1;
}
.threecolumngridright {
  grid-column: 6 / span 1;
}
.threecolumngrid a:hover > .perspectivebutton {
  background-color: #333333;
}
.threecolumngrid a:hover > img {
  margin: 0px 0px 30px 0px;
  filter: none;
}
	
/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  grid-template-columns: auto 185px 14px 185px 14px 185px 14px 185px 14px 185px 14px 185px auto;
}
.sixcolumngrid img {
  width: 185px;
}
.perspectivebutton {
  padding: 20px 15px;
  font-size: 14px;
  width: 155px;
}

/* FOOTER SECTION ---------------- */

.footpanel {
  width: 1180px;
}

/* ARTICLES SECTION -------------- */

.articlelist {
  width: 1220px;
}
.article {
  width: 244px;
}
.article:after {
  width: 80px;
}
.article img {
  width: 244px;
}
.articledisplay img {
  margin: 0px 0px 20px 0px;
}
.article:hover:after {
  width: 180px;
}

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 140px auto;
  }
.testimonialgrid {
  background-size: 140px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 140px auto, cover;
}

/* EXTRA INSIGHTS PANEL --------------- */

.extrainsightspanel {
	width: 870px;
}
	
}

@media screen and (max-width:1239px) {
	
	
/* UNIVERSAL FONT SIZINGS --------- */

h2 {
  font-size: 28px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 12px;
}
p, ul, li {
  font-size: 14px;
}

/* HEADER SECTION ---------------- */

#navwrapper {
  width: 900px;
}
.menubutton {
  margin: 0px 10px 0px 6px;
}

/* TOP LEVEL NAVIGATION ---------- */

#menuitems {
  width: 900px;
}

/* DROP MENUS -------------------- */

#menu01, #menu03, #menu02, #menu04, #menu05, #menu06 {
  width: 900px;
}
.column {
  margin-right: 20px;
}
.onecolumn {
  width: 164px;
}
.twocolumn {
  width: 348px;
}
.threecolumn {
  width: 532px;
}
.fourcolumn {
  width: 716px;
}
.fivecolumn {
  width: 900px;
}
.lastcolumn {
  margin-right: 0px;
}

/* BIG BUTTONS ------------------- */

.bigbuttons {
  width: 900px;
  grid-template-columns: auto 440px 20px 440px auto;
}
.buttonpic img {
  width: 150px;
}
.buttonlogo img {
  height: 60px;
  margin: 0px 0px 5px 165px;
}
.buttonhead {
  margin: 0px 0px 5px 165px;
}
.buttontext {
  margin: 0px 0px 5px 165px;
}
.buttonlink {
  margin: 10px 0px 0px 165px;
}

/* ADJUSTMENTS FOR SUBSCRIPTIONS BUTTONS */

.subsbigbuttons .buttonlink {
	margin: -24px 0px 0px 0px!important;
}
	
/* HOME HERO SECTION ------------- */

.homegridintro p {
	padding: 0px 150px!important;
}

/* CLIENT SECTION ---------------- */

.clientgrid span {
  max-width: 900px;
}
.clientgrid div {
  margin: 15px 15px;
}
.clientgrid img {
  height: 40px;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  grid-template-columns: auto 100px	40px 660px auto;
}
.testimonialgrid img {
  width: 100px;
  height: 100px;
  border-radius: 55px;
}

/* COLUMN PAGE GRIDS --------------*/

.threecolumngrid {
  grid-template-columns: 1fr 240px 30px 240px 30px 240px 1fr;
}
.threecolumngrid img {
  width: 240px;
}
.smalltwocolumngrid {
  grid-template-columns: 1fr 240px 30px 240px 1fr;
}

/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  grid-template-columns: 1fr 240px 30px 240px 30px 240px 1fr;
  grid-template-rows: auto auto 25px auto 50px;
}
.sixcolumngrid img {
  width: 240px;
}
.sixcolumngridone, .sixcolumngridtwo, .sixcolumngridthree {
  grid-row: 2 / 3;
}
.sixcolumngridfour, .sixcolumngridfive, .sixcolumngridsix {
  grid-row: 4 / 5;
}
.sixcolumngridone, .sixcolumngridfour {
  grid-column: 2 / span 1;
}
.sixcolumngridtwo, .sixcolumngridfive {
  grid-column: 4 / span 1;
}
.sixcolumngridthree, .sixcolumngridsix {
  grid-column: 6 / span 1;
}
.perspectivebutton {
  display: none;
}
.sixcolumngrid h2 {
  grid-column: 2 / span 5;
}
.sixcolumngrid p {
  margin: 0px;
}

/* SCHEDULE A CALL SECTION ------- */

.requestbutton {
  margin: 100px auto;
}

/* FOOTER SECTION ---------------- */

.footpanel {
  width: 900px;
}

/* ARTICLES SECTION -------------- */

.articlelist {
  width: 940px;
}
.articlewrapper {
  width: 900px;
}
.articledisplay {
  width: 560px;
}
.article {
  width: 225px;
}
.article img {
  width: 225px;
}
.articledisplay img {
	width: 560px;
}	

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 110px auto;
  }
.testimonialgrid {
  background-size: 110px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 110px auto, cover;
}
}

@media screen and (max-width:949px) {
	
/* UNIVERSAL FONT SIZINGS --------- */

h2 {
  font-size: 26px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 11px;
}
p, ul, li {
  font-size: 14px;
}

/* HEADER SECTION ---------------- */

header {
  position: static;
  padding: 20px 0px 0px 0px;
}
#navwrapper {
width: 100%;
margin: 0px auto;
	padding: 0px;
  display: grid;
    grid-template-columns: 1fr auto 60px;
  grid-template-rows: 40px auto auto auto;
  align-items: center;
  pointer-events: all;
	}
#menuitems {
	width: 100%;
    padding: 40px 0px 0px 0px;
    grid-template-columns: 0px 1fr 60px;
    grid-template-rows: 40px auto auto auto auto auto auto auto auto auto auto auto auto;
    align-items: center;
    display: none;
  }
  header h1 {
    margin: 15px 0px 30px 15px;
    background-size: 70px auto;
  }
  #featurebuttons {
    grid-column: 2 / span 1;
    grid-row: 1 / 2;
    margin: -20px 0px 0px auto;
  }
  #mobilemenubutton {
    text-indent: -320000px;
    float: right;
    width: 60px;
    height: 60px;
    background: center center no-repeat url(../images/grey_arrow_down.png);
    margin: 0;
    cursor: pointer;
    opacity: .6;
    display: block;
    grid-column: 3 / span 1;
    grid-row: 1 / 2;
	  margin-top: -20px;
  }
  #mobilemenubutton:hover {
    opacity: 1;
  }
  #mobilemenubutton.open {
    background-image: url(../images/grey_arrow_up.png) !important;
  }
.menubutton {
    padding: 10px 15px;
    margin: 0px;
    display: block;
    width: 100%;
    border-bottom: #333333 1px solid;
	background: none;
  }
  #nav01 {
    grid-column: 1 / span 7;
    grid-row: 2 / 3;
  }
  #nav02 {
    grid-column: 1 / span 7;
    grid-row: 4 / 5;
  }
  #nav03 {
    grid-column: 1 / span 7;
    grid-row: 6 / 7;
  }
  #nav04 {
    grid-column: 1 / span 7;
    grid-row: 8 / 9;
  }
  #nav05 {
    grid-column: 1 / span 7;
    grid-row: 10 / 11;
  }
  #menu01 {
    grid-row: 3 / 4;
  }
  #menu02 {
    grid-row: 5 / 6;
  }
  #menu03 {
    grid-row: 7 / 8;
  }
  #menu04 {
    grid-row: 9 / 10;
  }
  #menu05 {
    grid-row: 11 / 12;
  }
  .megamenu {
    padding: 0px 15px;
    margin: 0px auto;
    display: block;
    grid-column: 1 / span 3;
    width: 100% !important;
  }
  .onecolumn {
    width: 150px;
  }
  .twocolumn {
    width: 320px;
  }
  .threecolumn {
    width: 490px;
  }
  .fourcolumn {
    width: 660px;
  }
  .fivecolumn {
    width: 100%;
  }
  .bigbuttons {
    width: 100%;
    grid-template-columns: 0px 1fr 0px;
    grid-template-rows: 0px auto 15px auto 0px;
  }
.leftbutton {
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
}
.rightbutton {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
}

/* ADJUSTMENTS FOR SUBSCRIPTIONS BUTTONS */

.subsbigbuttons .buttonlink {
	margin: -25px 0px 0px 0px!important;
}

/* HOME HERO SECTION ------------- */

#homegridwrapper {
  grid-template-columns: 1fr 400px 1fr;
  grid-template-rows: 30px auto 20px auto 10px auto 20px auto 10px auto 40px;
}
.homegridintro {
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
  padding: 0px;
}
.homegridintro p {
	padding: 0px!important;
}
.fourcolumngrid-one {
  grid-column: 2 / span 1;
  grid-row: 6 / 7;
  margin: 0px auto;
}
.fourcolumngrid-two {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
  margin: 0px auto;
}
.fourcolumngrid-three {
  grid-column: 2 / span 1;
  grid-row: 8 / 9;
  margin: 0px auto;
}
.fourcolumngrid-four {
  grid-column: 2 / span 1;
  grid-row: 10 / 11;
  margin: 0px auto;
}	

/* TWO COLUMN -------------------- */

.twocolumngrid {
  grid-template-columns: 1fr 400px 1fr;
  grid-template-rows: 20px auto 0px auto auto 30px;	
}
.imagecolumn {
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
}
.textcolumn {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
}
	
.extrainfopanel {
grid-column: 2 / span 1;
grid-row: 5 / 6;
}
.firsttwocolumn .twocolumngrid-left, .firsttwocolumn .twocolumngrid-right {
  margin: 0px auto;
}
.twocolumngrid img {
  width: 510px;
  height: auto;
}
.twocolumngrid .qchiproductlogo, #homegridwrapper .qchiproductlogo {
  width: auto;
  height: 120px;
  margin-bottom: 5px;
}
.qchicentrelogo {
  width: auto;
  height: 120px;
  margin: 0px auto 5px auto;
}
.lightgreengrid .qchiproductlogo, .qchicentrelogo {
  filter: invert(76%) sepia(95%) saturate(3610%) hue-rotate(142deg) brightness(97%) contrast(89%);
}

/* CLIENT SECTION ---------------- */

.clientgrid span {
  max-width: 600px;
}
.clientgrid div {
  margin: 15px 15px;
}
.clientgrid img {
  height: 40px;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  grid-template-columns: auto 500px auto;
  grid-template-rows: 40px auto 20px auto 50px;
}
.testimonialgrid img {
  width: 80px;
  height: 80px;
  border-radius: 45px;
  grid-column: 2 / span 1;
  grid-row: 2 / 3;
}
.testimonialtext {
  grid-column: 2 / span 1;
  grid-row: 4 / 5;
}
	
/* COLUMN PAGE GRIDS --------------*/

.threecolumngrid {
  grid-template-columns: 1fr 270px 1fr;
  grid-template-rows: 30px auto 10px auto 10px auto 0px;
}
.smalltwocolumngrid {
  grid-template-columns: auto 270px auto;
  grid-template-rows: 10px auto 10px auto 30px;
}
.lastthree {
  grid-template-rows: 30px auto 10px auto 10px auto 30px;
}
.threecolumngridleft, .threecolumngridmid, .threecolumngridright, .smalltwocolumngridleft, .smalltwocolumngridright {
  grid-column: 2 / span 1;
}
.threecolumngridleft, .smalltwocolumngridleft {
  grid-row: 2 / 3;
}	
.threecolumngridmid, .smalltwocolumngridright {
  grid-row: 4 / 5;
}	
.threecolumngridright {
  grid-row: 6 / 7;
}

/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  grid-template-columns: 1fr 270px 20px 270px 1fr;
  grid-template-rows: auto auto 10px auto 10px auto 30px;
}
.sixcolumngridone, .sixcolumngridtwo {
  grid-row: 2 / 3;
}
.sixcolumngridthree, .sixcolumngridfourx {
  grid-row: 4 / 5;
}
.sixcolumngridfive, .sixcolumngridsix {
  grid-row: 6 / 7;
}
.sixcolumngridone, .sixcolumngridthree, .sixcolumngridfive {
  grid-column: 2 / span 1;
}
.sixcolumngridtwo, .sixcolumngridfour, .sixcolumngridsix {
  grid-column: 4 / span 1;
}
.sixcolumngrid h2 {
  grid-column: 2 / span 3;
}
	
/* ARTICLES SECTION -------------- */

.articlelist {
  width: 640px;
}
.articlewrapper {
  width: 690px;
}
.articledisplay {
  width: 690px;
	padding: 0px 25px;
  margin: 0px auto 0px auto;
  float: none;
}
.articledisplay:after {
  display: block;
  content: "";
  width: 240px;
  height: 1px;
  margin: 20px auto 15px 0px;
  background-color: #6901A0;
}
.sidebar {
  width: 640px;
  margin: 30px auto 0px auto;
  padding: 0px;
  float: none;
  border: none;
}
.article {
  width: 210px;
  padding: 20px 10px;
}
.sidebar .article {
  padding: 20px 0px;
	}	
.article img {
  width: 210px;
}
.articledisplay img {
	width: 640px;
  margin: 0px 0px 20px 0px;
}
.article h3 {
  text-align: left;
  color: #6901A0;
  margin: 0px 0px 5px 0px;
  font-weight: 800;
}
.articledisplay h3 {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 20px 0px;
  font-weight: 400;
}
.article p {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 5px 0px;
  font-weight: 400;
}
.datedeets {
  width: 640px;
}
.article:hover:after {
  width: 160px;
}
	
/* EXTRA INSIGHTS PANEL --------------- */	

.extrainfopanel {
		width: 400px;
	}

.extrainsightstitle{
	margin-left: 10px;
}

.extrainsightspanel {
	width: 420px;
	margin: 0px 0px 0px -10px;
}

/* FOOTER SECTION ---------------- */

.footpanel {
  width: 100%;
  margin: 0 auto;
  padding: 25px 15px;
  font-size: 12px;
}

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 90px auto;
  }
.testimonialgrid {
  background-size: 90px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 90px auto, cover;
}
	
}

@media screen and (max-width:689px) {
	
/* UNIVERSAL FONT SIZINGS --------- */

h2 {
  font-size: 24px;
}
h3 {
  font-size: 19px;
}
h4 {
  font-size: 11px;
}
p, ul, li {
  font-size: 13px;
}

/* HEADER SECTION ---------------- */
	
.megamenu {
    padding: 0px;
  }	
 .column, .onecolumn, .twocolumn, .threecolumn, .fourcolumn, .fivecolumn {
    float: none;
    margin: 0px;
	 padding: 0px;
    width: 100%; 
  }
  .columntitle, .sectiontitle, .optiontext {
    display: none;
  }
  .optiontitle {
    font-size: 11px;
    color: #808389;
  }
  .column li {
    margin: 0px !important;
    padding: 10px 15px;
    display: block;
    width: 100%;
    border-bottom: 1px solid #A8ADB1;
    font-size: 10px;
    text-transform: uppercase;
  }

/* CLIENT SECTION ---------------- */

.clientgrid span {
  max-width: 400px;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  grid-template-columns: auto 400px auto;
}

/* PERSPECTIVES SECTION ---------- */

.sixcolumngrid {
  grid-template-columns: 1fr 270px 1fr;
  grid-template-rows: auto auto 10px auto 10px auto 10px auto 10px auto 10px auto 30px;
}
.sixcolumngridone {
  grid-row: 2 / 3;
}
.sixcolumngridtwo {
  grid-row: 4 / 5;
}
.sixcolumngridthree {
  grid-row: 6 / 7;
}
.sixcolumngridfour {
  grid-row: 8 / 9;
}
.sixcolumngridfive {
  grid-row: 10 / 11;
}
.sixcolumngridsix {
  grid-row: 12 / 13;
}
.sixcolumngridone, .sixcolumngridthree, .sixcolumngridfive, .sixcolumngridtwo, .sixcolumngridfour, .sixcolumngridsix {
  grid-column: 2 / span 1;
}
.sixcolumngrid h2 {
  grid-column: 2 / span 1;
}
	
/* ARTICLES SECTION -------------- */

.articlelist {
  width: 420px;
}
.articlewrapper {
  width: 460px;
}
.articledisplay {
  width: 460px;
}
.sidebar {
	padding: 0px 15px;
  width: 460px;
}
.article {
  width: 210px;
  padding: 20px 10px;
}
.sidebar .article {
  padding: 20px 0px;
	}	
.article img {
  width: 210px;
}
.articledisplay img {
	width: 640px;
  margin: 0px 0px 20px 0px;
}
.article h3 {
  text-align: left;
  color: #6901A0;
  margin: 0px 0px 5px 0px;
  font-weight: 800;
}
.articledisplay h3 {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 20px 0px;
  font-weight: 400;
}
.article p {
  text-align: left;
  color: #8E8E8B;
  margin: 0px 0px 5px 0px;
  font-weight: 400;
}
.datedeets {
  width: 440px;
}

/* FOOTER SECTION ---------------- */

.footcolumn, .last {
    float: none;
    margin: 0px 0px 25px 0px;
    padding: 0px;
    border: none;
    max-width: 100%;
  }

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 80px auto;
  }
.testimonialgrid {
  background-size: 80px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 80px auto, cover;
}
	
}

@media screen and (max-width:459px) {

html, body {
		min-width: 340px;
	}
	iframe {
		max-width: 300px;
	}
	
/* HEADER SECTION ---------------- */

#featurebuttons {
    grid-column: 1 / span 7;
    grid-row: 10 / 12;
	float: none;
	width: 100%;
	margin: 10px 0px 0px 0px;
  }
#tryqchi, #qchiprices {
    padding: 10px 15px;
    display: block;
    width: 100%;
    border-radius: 0px!important;
    grid-column: 1 / span 2;
    margin: 0px!important;
	float: none;
    border-left: none;
    border-right: none;
    border-top: none;
  }
#tryqchi {
    grid-row: 10 / 11;
    border-radius: 0px;
  }
#qchiprices {
    grid-row: 11 / 12;
    border-radius: 0px;
  }
.bigbuttons img {
		display: none;
	}
.buttonlogo img, .buttonhead, .buttontext, .buttonlink {
  margin: 0px 0px 5px 0px;
}
	
	


/* ADJUSTMENTS FOR SUBSCRIPTIONS BUTTONS */

.subsbigbuttons .buttonlogo img {
	display: block;
}
.subsbigbuttons .buttonlink {
	display: none;
}	
	
	
	
	
	
	
	
	
	

/* CLIENT SECTION ---------------- */

.clientgrid span {
  max-width: 300px;
}

/* TESTIMONIAL SECTION ----------- */

.testimonialgrid {
  grid-template-columns: auto 270px auto;
}
	
/* HOME HERO SECTION ------------- */

#homegridwrapper {
  grid-template-columns: 1fr 270px 1fr;
}

/* TWO COLUMN -------------------- */

.twocolumngrid {
  grid-template-columns: 1fr 270px 1fr;
}
.twocolumngrid img {
  width: 270px;
}
.twocolumngrid .qchiproductlogo, #homegridwrapper .qchiproductlogo {
  height: 70px;
}
.qchicentrelogo {
  height: 55px;
}	
	
/* ARTICLES SECTION -------------- */

.articlelist {
	padding-top: 0px;
  width: 300px;
}
.articlewrapper {
  width: 320px;
}
.articledisplay {
  width: 320px;
}
.sidebar {
  width: 300px;
}
.article {
  width: 300px;
  padding: 20px 10px;
}
.sidebar .article {
  padding: 20px 0px;
	}	
.article img {
  width: 280px;
}
.articledisplay img {
	width: 280px;
}
.datedeets {
  width: 300px;
}

/* EXTRA INSIGHTS PANEL --------------- */	

.extrainfopanel {
		width: 300px;
	}
.extrainsightspanel {
	width: 320px;
}

/* UNIVERSAL BACKGROUND SIZES ---- */

.twocolumngrid, .threecolumngrid, .problemsheader, .smalltwocolumngrid, .schedulersection, .sixcolumngrid, .gridoverlay, .articlepage, .diagramsection, .problemssignoff  {
  background-size: 70px auto;
  }
.testimonialgrid {
  background-size: 70px auto, contain;
}
.homepage, .affinitipage, .harmonipage, .ourstorypage, .deploymentpage {
  background-size: 70px auto, cover;
}
	
}