@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: "HP Simplified Light";
	src        : url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cd.eot");
	/* IE9*/
	src        : url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cdd41d.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
		url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cd.woff2") format("woff2"),
		/* chrome、firefox */
		url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cd.woff") format("woff"),
		/* chrome、firefox */
		url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cd.ttf") format("truetype"),
		/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		url("%40font-face/1b96a8adcad08f7aa8edb5b1253205cd.svg#HP Simplified Light") format("svg");
	/* iOS 4.1- */
}

body {
	font-family: "HP Simplified Light" !important;
}


.navbar-brand {
	display   : block;
	max-height: 60px;
}

.navbar-brand img {
	display: block;
	height : 60px;
}

.nav-link {
	font-family: "HP Simplified Light" !important;
	font-weight: bold;
	margin     : 0 15px;
	color      : #5a5a5a;
}

#hero {
	width            : 100%;
	height           : 700px;
	background-image : url('../images/hero_bg.png');
	background-repeat: no-repeat;
	background-size  : 100%;
}


.searchbox {
	position: relative;
	top     : -4%;
	left    : -2%;
}

/*@media screen and (min-width:1400px){*/
/*    .searchbox {*/
/*	top     : -3%;*/
/*	left    : -5%;*/
/*}*/
/*}*/

#whereis-printer-model-label span {
	display      : none;
	top          : 100px;
	position     : fixed;
	background   : #fff;
	color        : #000;
	padding      : 20px;
	border-radius: 20px;
	z-index      : 20;
	left         : 200px;

}

#whereis-printer-model-label:hover span {
	display: block;
}


#devicenotlisted span {
	display      : none;
	bottom          : 30px;
	position     : absolute;
	background   : #fff;
	color        : #000;
	padding      : 20px;
	border-radius: 20px;
	z-index      : 20;
	left         : 0;
}

#devicenotlisted:hover span {
	display: block;
}

.invalid-feedback {
	color: #fff !important;
}

.navbar-toggler {
	color: gray;
}

.navbar-toggler:focus {
	box-shadow: none !important;
	color     : black;
}

.load-img {
	display  : inline-block;
	max-width: 100%;
}

.toast-position {
	position : fixed;
	top      : 50%;
	top      : calc(50% - 200px);
	left     : calc(50% - 200px);
	transform: translateY(calc(-50% + 200px)), translateX(calc(-50% + 200px));
}

.overlay-bg {
	background-color: rgba(0, 0, 0, 0.3);
}

.err-toast {
	width     : 35%;
	background: #fff;
}

.err-toast-bg {
	background: rgba(153, 168, 197, 0.2);
}

.not-listed{
    position:relative;
}

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

	#hero {
		background-image: url('../images/bg-mobile.png');
		background-size : 100% 740px;
	}

	.whereis-printer-model {
		margin-left: 15px;
	}

	.form-cont {
		padding: 0 10px
	}

	#whereis-printer-model-label span {
		margin: 0 auto;
		width : 90%;
		left  : 10px;
		top   : 60px;
	}

	.load-img {
		margin : 20px auto;
		display: block;
	}


	.err-toast {
		width: 80%;
	}

}

@media screen and (min-width: 501px) and (max-width: 800px) {

	#hero {
		height: 300px;
	}

	.searchbox {
		position: relative;
		top     : 30px;
		left    : -5px;
	}

	.form-cont {
		padding: 0 10px
	}

}



@media screen and (min-width: 801px) and (max-width: 830px) {
	#hero {
		height: 300px;
	}

	.searchbox {
		position: relative;
		top     : 40px;
		left    : -29px;
	}

	.form-cont {
		padding: 0 10px
	}

}

@media screen and (min-width: 1920px) {
	#hero {
		height: 800px;
	}
	.searchbox {
		top     : -10%;
	}

}

.benefits-item,
.additional-services-item{
	display: flex;
	align-items: start;
	column-gap: 20px;
	font-size: 1.2rem;
	max-width: 80%;
}

.additional-services-item{
	max-width: 100%;
}

.additional-services-item-container{
	max-width: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3375b5+0,000000+100&0.65+0,0+26 */
background: linear-gradient(45deg,  rgba(51,117,181,0.65) 0%,rgba(38,87,134,0) 26%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}
.additional-services-item-container.reverse{
	max-width: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,3375b5+100&0+74,0.65+100 */
background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(38,87,134,0) 74%,rgba(51,117,181,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */



}

.benefits-item .icon,
.additional-services-item .icon{
	font-size: 2rem;
	color: #3375b5
}

.additional-services-item .icon{
	width: 50px;
}

.additional-services-item{
	column-gap: 30px;
}
.sec-head{
	text-decoration: underline;
}

@media screen and (max-width:800px){
	.additional-services-item{
		display: block;
	}
}

.section-add-services{
	border-bottom: 30px solid #999;
}