html{background:url(/pix/bg-page.png) no-repeat; background-size: 1920px; background-position: top left; }
body.hp{background:url(/pix/iso-bg.svg) no-repeat; background-size: 80vw; background-position: left 40vw  top 0vw; }
#page-content { padding: 5rem 0; text-align: center;  }


/* Slides ------------------------------------------------------- */
#hp-slides { width:100%; height:70vh; position:relative;  overflow: visible; margin-top: 3rem; margin-bottom:2rem;}
#hp-slides .cycle-slideshow{ width:100%; height:100%; overflow: visible!important; }
#hp-slides .slide{ width:100%; height:100%; }

#hp-slides .slide a{text-decoration: none; display: block;  height:100%; }
#hp-slides .slide .fw {height:100%;  }

#hp-slides .slide .flex-container{align-items: center; height:100%;flex-wrap: nowrap;  }
#hp-slides .slide .flex-item{width:600px;}
#hp-slides .slide .flex-item.text-box{width:35%;}
#hp-slides .slide .flex-item.image{width:65%;display: flex;align-items: center; }
#hp-slides .slide .image img{max-width: 1000px; width:100%; min-width: 700px; position: relative;}
#hp-slides .slide.Slide-copiers-printers .image img{max-width: 700px; }


#hp-slides .slide .inner { height:100%; position: relative; }


#hp-slides .slide h1{color: #3d3d3d;  font-size:3rem; text-transform: uppercase; line-height:1.25; padding: 0; letter-spacing: -0.04em; position: relative; margin-bottom: 0.5em;  }
#hp-slides .slide p{color:#fff; font-size: 1.6rem;  font-weight: 300;text-shadow:0 1px 1px rgba(0,0,0,0.4); }

#hp-slides .Pager{ position:absolute; z-index:105; right:1rem; top:0;width:3rem; text-align:right;line-height:0.2; }
#hp-slides .Pager *{ transition:all 160ms; }
#hp-slides .Pager span {  cursor: pointer; display:inline-block; font-family: arial; font-size: 0; height: 3px; width: 2rem;  color: transparent; ; background: rgba(255,255,255,0.6); margin: 0; padding:0; box-shadow:0 1px 2px rgba(0,0,0,0.2);  }
#hp-slides .Pager span.cycle-pager-active { color: #fff; background: #fff; width:3rem;}
#hp-slides .Pager span:hover { width:3rem;}

#hp-slides .PrevNextNav div{position:absolute; z-index:150;  top:40vh; background: rgba(255,255,255,1);   border-radius: 50%;
		cursor:pointer;font-family:'FontAwesome'; text-align: center; font-size:8vh; width:10vh; height:10vh; line-height:10vh;}
.slidesSlimline #hp-slides .PrevNextNav div{top:40%;background: rgba(255,255,255,0.3); }
#hp-slides .PrevNextNav div:hover{background: #0055a5; color: white; }
#hp-slides .PrevNextNav #prev{ left:1.5vw; }
#hp-slides .PrevNextNav #next{ right:1.5vw;  }



@media screen and (max-width: 1200px) {
	#hp-slides .slide h1{font-size:4.5vw; }
	#hp-slides .slide .flex-item.text-box{width:45%;}
	#hp-slides .slide .flex-item.image{width:55%;}
}



@media screen and (max-width: 740px) {
	body.hp{background-position: left 20vw  top 0vw; }
	#hp-slides { height:60vh; margin-bottom:15vh;}
	#hp-slides .slide .flex-container{flex-wrap:wrap-reverse; height: 100%;}
	#hp-slides .slide .flex-item{width:100%!important; max-height: 100%;}

	#hp-slides .slide .image img{min-width: 0!important;max-height: 40vh; width: auto; margin: auto; }
	#hp-slides .slide h1{font-size:5vw; }


}

@media screen and (max-width: 600px) {
	#hp-slides .slide .flex-item.text-box{max-width: 400px; }
	#hp-slides .slide h1{font-size:2rem; }
}









#intro { max-width: 960px; margin:auto; text-align: center; position: relative; z-index: 200; }
#intro h1 {text-transform: uppercase; font-family:'Source Sans Pro'; font-weight:600; color: #0095cd;}
#intro h2 {text-transform: uppercase; font-family:'Source Sans Pro'; font-weight:200; color: #192a3b;}
#intro hr {max-width: 4rem;}

@media screen and (max-width: 500px) {
	#hp-slides .slide .flex-container{}
	#hp-slides .slide .image img{ }
	#hp-slides .slide .flex-item.text-box{align-items: center;  }

}








#solutions {margin-top: 6rem; position: relative; z-index: 2; }
#solutions .flex-container{ align-items: stretch;  }
#solutions .flex-item{  }
#solutions .flex-item.image {  width:40%; display:flex; align-items: center;  }
#solutions .flex-item.info {  width:60%; padding-left: 10%; display: flex;  }
#solutions .flex-item.image { background:url(/pix/defaultimage.jpg) center / cover; width:40%; padding: 5% 0;  }
#solutions .flex-item.image img{position: relative; max-width:100%; flex-shrink:0; right: -15%; display: inline-block; box-shadow: 0 0 30px rgba(0,149,205,0.3),0 0 10px rgba(0,149,205,0.2); }


#solutions .flex-container:nth-child(even) {flex-direction: row-reverse;}
#solutions .flex-container:nth-child(even) .flex-item.info {padding-left: 0%; padding-right: 10%; }
#solutions .flex-container:nth-child(even) .flex-item.image img{  right: 0;  left: -15%; }


#solutions .tile-set {margin-bottom: 13vh; }
#solutions .info { text-align: left;  display: flex; align-items: center; }
#solutions .info h3 {text-transform: uppercase; font-weight:400; color: #0095cd; position: relative;}
#solutions .info h3 .ico {margin-right: 0.3em; font-size: 28px;}
#solutions .info p.overview { font-size: 2rem; font-weight: 300; line-height: 1.3; margin: 0;  position: relative; padding-bottom: 0.5em;}
#solutions .info p.overview:after {content: ' ';position:absolute;height: 1px;width:1em;background: #cccccc;left:0; bottom:0;}
#solutions .info .details { font-size: 1.1rem;}

#solutions .bottom-padder { background: #fff; position: relative;z-index: 5; height: 5px;}


@media screen and (max-width: 680px) {
	#solutions .flex-item{width:100%!important;  }
	#solutions .flex-item.info { margin-top:1rem; padding-left:0!important; padding-right:0!important;  }
	#solutions .flex-item.image{ display: block; padding:0; background-image: none!important; }
	#solutions .flex-item.image img{ max-width:none; width:116%;box-shadow:none;right: -8%!important;left: -8%!important; }



}











/********************stats**************************/

#response-stats{background: #0095cd; padding-top: 10vw; color: #fff; background: #0095cd url(/pix/down-division.svg) no-repeat top center; background-size: 100%; margin-top: -1px;}
#response-stats h2 {color: #fff; text-align: center; text-transform: uppercase; padding: 0;}
#response-stats p.lead-desc {text-align: center;  margin-bottom: 2rem; padding: 0; font-size: 1.1rem;}
#response-stats .flex-container{justify-content:space-between; justify-content: space-around; flex-wrap: wrap; }
#response-stats .flex-container .flex-item{ width:21%; max-width: 250px; }
#response-stats .deco { background:url(/pix/hp/active-office-support-response.jpg) center / cover; padding-bottom: calc(713 / 1920  * 100%); position: relative;}
#response-stats .deco img { width:100%; position: absolute; top:-1px;}
#response-stats .cta { text-align: center;}

		.progress-chart {position: relative; margin-bottom: 5vw;}
		.progress-chart-legend {position: absolute;top:40%;left: 50%;transform: translateY(-50%) translateX(-50%);}
		.legend-val {font-size: 4em;display: block;text-align: center;font-weight: 300;font-family: 'Roboto', sans-serif; line-height: 1;}
		.legend-desc {display: block;margin-top:0;text-align: center;line-height: 1.1;}
		.long-desc {display: block;margin-top: 5px;text-align: center;}

@media screen and (max-width: 720px) {
	#response-stats .flex-container{justify-content: space-around; }
	#response-stats .flex-container .flex-item{ width:45%; }
}



/********************Partners**************************/

#Partners { background: #fff; padding: 4rem 0; text-align: center; }
#Partners h2 {  text-transform: uppercase; color: #0095cd; padding-bottom: 0; }
#Partners p.overview { margin: 0; font-size: 1.3rem; }

#Partners .flex-container{justify-content: center; margin-top: 5rem;}
#Partners .flex-item{width:33.3%; max-width: 450px; padding: 0 4%; margin-bottom: 3rem;}
#Partners .flex-item .logo{height:3rem;}
#Partners .flex-item .logo img{max-width: 100%; max-height: 100%;}




@media screen and (max-width: 680px) {
	#Partners .flex-item{width:50%; }
}








/********************Services**************************/

#contact-options .flexgrid {	display: flex; flex-flow: row wrap;}
#contact-options .flexgrid .griditem { display: flex; width: 50%;	align-items: center; justify-content: center; overflow: hidden; background:#192a3b;}
#contact-options .flexgrid .griditem:first-child { background: #0095cd;}
#contact-options .flexgrid .griditem .textcontent{ margin:5rem 0; padding: 0 20%; }

#contact-options .flexgrid .textcontent{ text-align: center; }
#contact-options .flexgrid .textcontent h2{ text-transform: uppercase; color: #fff; padding: 0; }
#contact-options .flexgrid .textcontent h2:after { display: none; }

#contact-options .flexgrid .textcontent p{ color: #fff; font-size: 1.7rem;}
#contact-options .flexgrid .textcontent .more { color: #fff;position: relative; display: inline-block; text-decoration: none; padding:24px 90px 24px 45px; background:#0095cd; font-size: 1.1rem; text-transform: uppercase; }
#contact-options .flexgrid .textcontent .more:hover { background: #1aa0d2; }
#contact-options .flexgrid .griditem:first-child .textcontent .more { background:#192a3b  }
#contact-options .flexgrid .griditem:first-child .textcontent .more:hover { background:#1e3144  }
#contact-options .flexgrid .textcontent .more:before {content:"\f178"; font-family:FontAwesome; position:absolute; right:45px; }

@media screen and (max-width: 1350px) {
	#contact-options .flexgrid .griditem .textcontent{ margin:4rem 0; padding: 0 8%; }
}

@media screen and (max-width: 950px) {
	#contact-options .flexgrid .textcontent h2{ font-size: 2rem; }
		#contact-options .flexgrid .textcontent p{ font-size: 1.4rem;}
		#contact-options .flexgrid .textcontent .more {  padding:18px 70px 18px 35px;  font-size: 1rem;  }
		#contact-options .flexgrid .textcontent .more:before { right:35px; }
	#contact-options .flexgrid .griditem .textcontent{ margin:3rem 0; padding: 0 6%; }
}

@media screen and (max-width: 650px) {
	#contact-options .flexgrid .griditem {width: 100%;}
	#contact-options .flexgrid {flex-direction: column-reverse!important;}
}