@import url('reset.css');
@import url('grid.css');

* { box-sizing: border-box; }

/* 	================
		Text
	=============== */

html,
body {
	font-size: 62.5%;
}

a { color: #353636; text-decoration: none; ;}
a:hover { text-decoration: underline; }

html {
	font-family: "museo-sans", sans-serif;
	font-weight: 300;
}

p {
	font-size: 1.6rem;
	color: #353636
}

h1,h2,h3 { color: #2a2a2a; }
h1 {
	font-family: "museo-slab", serif;
	font-size: 3.5rem;
	font-weight: 700;
	text-transform: uppercase;
	background: #FE9A12;
	color: #fff;
	text-align: center;
	padding: 2.5rem 6rem;
	display: inline-block;
	margin: auto;
}
h2 {
	font-size: 3.0rem;
	font-weight: 900;
	text-transform: uppercase;
}
h3 {
	font-size: 2.0rem;
	font-weight: 700;
	text-transform: uppercase;
}

@media ( min-width: 768px ) {
	h1 { font-size: 4.4rem; }
	h2 { font-size: 4.0rem; }
	h3 { font-size: 3.1rem; }
}

/*	=================
		Elements
	================= */

body { background-color: #606163; }

header { text-align: center; }
section { overflow: hidden; padding-top: 5rem; padding-bottom: 5rem; }
.pad-short { overflow: hidden; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media ( min-width: 1200px ) {
	section { padding-top: 10rem; padding-bottom: 10rem; }
	.pad-short { padding-top: 7rem; padding-bottom: 7rem; }
}

.bg-grey { background-color: #e2e3e3; }
.bg-white { background-color: #fff; }

.xs-hidden { display: none; }
.sm-hidden { display: none; }
.md-hidden { display: none; }
@media ( min-width: 768px ) { span.xs-hidden { display: inline; } }
@media ( min-width: 950px ) { span.sm-hidden { display: inline; } }
@media ( min-width: 1200px ) { span.sm-hidden { display: inline; } }

h2 { margin-bottom: 2.5rem; }
h1 em,
h2 em {
	color: #FE9A12;
}
p {
	margin-bottom: 1.5rem;
}
p em { color: #FE9A12; }

section p {
	line-height: 1.8;
}

a.btn {
	text-transform: uppercase;
	padding: 0.7rem 3.5rem;
	font-size: 1.6rem;
	display: inline-block;
	margin-top: 1.5rem;
}
a.btn.red {
	background-color: #FE9A12;
	color: #fff;
}

.pull-right { float: right; }

.ruled:after {
	content: " ";
	display: block;
	margin-top: 1.3rem;
	margin-bottom: 3rem;
	width: 105px;
	height: 2px;
	background-color: #FE9A12;
}

.img-row:after { content: " "; display: table; clear: both;}
.img-row img {
	display: block;
	width: 100%;
}
@media ( min-width: 500px ) {
	.img-row img {
		float: left;
		width: 33.3333%;
	}
}

/*	=================
		Header
	================= */

header.nav nav div.navcol {
	padding-left: 25px;/* SETTING: The gutter size (space between cols) */
	position: relative;
	float: right;
	display: block;
}

header.nav nav div.col {
	padding-top: 5px;/* SETTING: The gutter size (space between cols) */
}

.cart-count:after{
	content:attr(value);
	font-size:12px;
	background: red;
	color: white;
	border-radius:50%;
	padding:2px;
	position:relative;
	left:-6px;
	top:-10px;
	opacity:0.9;
	}


header.nav { background-color: #fff; text-align: left; }

header.nav .username {
    display: block;
    text-align: right;
}

header.nav .umi-logo { margin-top: 10px; margin-bottom: 10px; }

header.nav .width-wrap {
	position: relative;
}
header.nav nav {
	font-size: 1.0rem;
	font-weight: 700;
	text-transform: uppercase;

	margin-top: 75px;
	margin-bottom: 1.2rem;

	float: right;

	overflow: hidden;
	height: 0;

	-webkit-transition: height 150ms ease-in-out;
	-moz-transition: height 150ms ease-in-out;
	transition: height 150ms ease-in-out;

}



header.nav nav > ul > li {
	margin-top: 1.0rem;
}

header.nav nav a {
	text-decoration: none;
	color: #2a2a2a;
	display: inline-block;
}
header.nav nav a:hover {
	text-decoration: none;
}
header.nav nav a.active { color: #FE9A12; }

#menu-icon {
	position: absolute;
	top: 45px;
	right: 10px;
	cursor: pointer;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.burger { width: 25px; display: inline-block; vertical-align: middle; margin-right: 5px; }
.burger .paddy { height: 3px; margin-bottom: 4px; background-color: #2a2a2a; }

@media ( min-width: 450px ) {
	header.nav nav { font-size: 2.0rem; }
	#menu-icon { right: 45px; }
}
@media ( min-width: 768px ) {

	#menu-icon { display: none; }

	header.nav nav,
	header.nav nav.expanded {
		height: auto !important;
		margin-top: 56px;
		font-size: 1.4rem;
	}

	header.nav nav a { border-bottom: solid 2px transparent; padding-bottom: 1rem; }
	header.nav nav a:hover { border-bottom: solid 2px #e2e3e3; }
	header.nav nav a.active {
		color: #2a2a2a;
		border-bottom: solid 2px #FE9A12;
	}
	header.nav nav a.active:hover {
		text-decoration: none;
	}

	header.nav nav ul li {
		float: left;
		margin-left: 2.5rem;
	}        
}
@media ( min-width: 950px ) {
	header.nav nav { font-size: 1.7rem; }
}
@media ( min-width: 1250px ) {
	header.nav nav { font-size: 2.0rem; }
	header.nav nav > ul > li { margin-left: 3.0rem; }
}

/*	=====================
		Product Nav
	===================== */

nav.product-nav {
	background-color: #606163;
}

nav.product-nav .col {
	height: 100%;
}
nav.product-nav a {
	color: #fff;
	font-size: 2.0rem;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
	text-align: center;
	padding: 2rem;
}
nav.product-nav a.active {
	background-color: #2a2a2a;
}
nav.product-nav a:hover {
	background-color: #444;
	text-decoration: none;
}

nav .grid {
	padding: 0;
}

@media ( min-width: 768px ) {
	nav .grid { padding-left: 50px; padding-right: 50px; }
	nav.product-nav a {
		font-size: 2.3rem;
	}
}
@media ( min-width: 1200px ) {
	nav .grid { padding-left: 100px; padding-right: 100px; }
}

/*	======================
		Footer
	====================== */

footer {
	background-color: #606163;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
}

footer section { padding-bottom: 4rem; }

footer a {
	color: #fff;
}

footer nav { float: left; margin-bottom: 2.0rem; }

footer nav > ul > li {
	margin-right: 2.5rem;
	margin-bottom: 1.0rem;
}

@media ( min-width: 1050px ) {
	footer nav > ul > li { float: left; }
}

footer .info { float: right; }
footer .info .left { float: left; margin-bottom: 2.0rem; }
footer .info .right { float: right; }
footer .info .umi-logo { float: right; margin-left: 2.0rem; margin-top: -0.8rem; }
footer .info .copy { font-size: 1.1rem; font-weight: 300; display: inline-block; margin-top: 1.5rem; }

/*	==================
		Home
	================== */

.home-page .top-banner {
	position: relative;
	max-height: 60rem;
	min-height: 24rem;
	overflow: hidden;
}
.home-video-dimensions { width: auto !important; height: auto !important; }
.home-page .top-banner .video-js,
.home-page .top-banner .vjs-tech {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
}
.home-page .top-banner .vjs-poster {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url('../images/header-home.jpg');
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.home-page .top-banner video {
	width: 100%;
	min-height: 24rem;
	background: #000;
	background-image: url('../images/header-home.jpg');
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
@media ( min-width: 500px ) { .home-page .top-banner video { min-height: 30rem; } }
@media ( min-width: 768px ) { .home-page .top-banner video { min-height: 36rem; } }
@media ( min-width: 950px ) { .home-page .top-banner video { min-height: 50rem; } }
@media ( min-width: 1200px ) { .home-page .top-banner video { min-height: 60rem; } }

.home-page .top-banner .over {
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;

	font-family: "museo-sans", sans-serif;
	color: #fff;
}

.home-page .top-banner .over h1 {
	font-family: "museo-sans", sans-serif;
	font-weight: 900;
	font-size: 2.0rem;
	text-transform: uppercase;
	margin-bottom: 1.3rem;
	padding: 0;
	background: none;
	text-align: left;
	display: block;
}

.home-page .top-banner .over p {
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 1.7rem;
	color: #fff;
}

.home-page .top-banner .over a {
	color: #fff;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.2rem;
	padding: 0.6em 2.5rem;
	border: 1px solid #fff;
}
.home-page .top-banner .over a:hover {
	text-decoration: none;
	background-color: rgba(255,255,255,.3);
}

@media ( min-width: 500px ) {
	.home-page .top-banner .over h1 { font-size: 3.0rem; }
	.home-page .top-banner .over p { font-size: 1.7rem; }
}
@media ( min-width: 768px ) {
	.home-page .top-banner .over h1 { font-size: 4.0rem; }
}
@media ( min-width: 950px ) {
	.home-page .top-banner .over h1 { font-size: 5.3rem; margin-bottom: 2.7rem; }
	.home-page .top-banner .over p { font-size: 2.0rem; line-height: 1.7; margin-bottom: 3.3rem; }
}
@media ( min-width: 1200px ) {
	.home-page .top-banner .over h1 { font-size: 6.7rem; }
	.home-page .top-banner .over p { font-size: 2.5rem; }
}

.home-page .product-links {
	font-size: 1.8rem;
	font-weight: 700;
	text-transform: uppercase;
}
.home-page .product-links a {
	text-align: center;
	display: block;
	color: #333433;
	padding: 3rem;
}
.home-page .product-links a:hover { text-decoration: none; }
.home-page .product-links a img {
	width: 57px; height: 57px;
	display: block;
	margin: auto;
	margin-bottom: 2rem;

	transition: transform 200ms ease-in-out;
}
.home-page .product-links a:hover img {
	transform: rotate(5deg);
}

.home-page p.steady { font-size: 1.7rem; }

.home-page .under-pressure { overflow-x: hidden; position: relative; }

.home-page img.right-edge { display: none; }
@media ( min-width: 768px )  {
	.home-page img.right-edge {
		display: block;
		position: absolute;
		right: -300px;
	}
}
@media ( min-width: 1200px ) {
	.home-page img.right-edge {
		right: 0;
		width: 30%;
	}
}

@media ( min-width: 768px ) {
	.home-page .product-links { font-size: 1.3rem; }
	.home-page .product-links .col a { border-left: solid 2px #cccccb; }
	.home-page .product-links .col:last-child a { border-right: solid 2px #cccccb; }
}
@media ( min-width: 950px ) {
	.home-page .product-links { font-size: 1.8rem; }
}
@media ( min-width: 1200px ) {
	.home-page .product-links { font-size: 2.2rem; }
	.home-page .product-links a img { width: auto; height: auto; }
}

/* Edits to home page performed by Jayden Windle */

.counter {
	background-color: #e8242f;
	padding: 40px 0;
}

.counter-img {
	border-right: solid 2px white;
	position: relative;
}

.counter-img img {
	width: 110px;
	height: auto;
	float: left;
	margin: 10px 0 15px;
}

.counter-img h2 {
	color: white;
	margin-left: 35px;
	margin-bottom: 0;
	display: block;
	float: left;
	margin-top: 30px;
}

.counter-blurb p {
	color: white;
	margin-left: 35px;
	margin-top: 33px;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.6em;
}

/*	=================
		Contact
	================= */

.contact-page h3 { text-transform: none; }

.contact-info-block {
	display: inline-block;
	font-size: 1.8rem;
	padding-right: 5rem;
}

#map { width: 100%; height: 36.3rem; margin-bottom: 5rem; }
@media ( min-width: 768px ) {
	#map { margin-bottom: 2.3rem; }
}

input,
select,
textarea,
label,
button,
.password,
.register {
	display: block;
	width: 100%;
	border: 1px solid #606163;
	margin-bottom: 2.3rem;
	padding: 1rem 2rem;

	font-family: "museo-sans", sans-serif;
	font-size: 2.1rem;
	font-weight: 800;
}

button.delete {

	border-width: 0px;
	margin-bottom: 1rem;	
	padding: 0px;

	background-image: url( '../images/trash-small.png' );
    background-size: 20px 20px;
	width: 20px;
	height: 20px;
	
	display: block;	
	margin-left: auto;
	margin-right: auto;
	
}



.contact-page button,
.careers-page button {
	font-size: 1.8rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	width: auto;
	display: inline-block;
	border: none;
	background: #FE9A12;
	padding: 0.8rem 5rem;
}

/* Edits to contact page performed by Jayden Windle */

.contact-info {
	margin-bottom: 85px;
}

.contact-info p {
	padding-right: 0;
	line-height: 1.4;
}

.map {
	width: 100%;
	height: 30.1rem;
	margin-top: 0.5rem;
}

.contact-form h3 {
	margin-bottom: 40px;
}

.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
	color: black;
	font-weight: 800;
}

.contact-form input[required]::-webkit-input-placeholder::after,
.contact-form textarea[required]::-webkit-input-placeholder::after {
	content: "*";
	color: red;
}

.contact-form select {
	background: white;
	font-weight: 800;
}

.contact-form button {
	float: right;
}

.contact-form p {
	float: right;
	font-size: 1.8rem;
}

.err-msg li {
	font-size: 1.8rem;
}

.ok-msg {
	font-size: 1.8rem;
}

.select-box {
	font-family: "museo-sans", sans-serif;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 25px;
	position: relative;
}

.select-arrow {
	width: 15px;
	height: auto;
	margin-left: 13px;
	margin-bottom: 4px;
}

.select-title {
	display: block;
	width: 100%;
	border: 1px solid #606163;
	margin-bottom: 2.3rem;
	padding: 1rem 2rem;
}

.select-opts {
	display: none;
	position: absolute;
	top: 47px;
	background: ghostwhite;
	z-index: 10;
	width: 100%;
}

.option {
	float: left;
	display: block;
	width: 100%;
	padding: 1rem 2rem;
	border: 1px solid #606163;
	border-top: 0px;
}

.option.selected {
	background-color: grey;
}

/*	=======================
		Header w Image
	======================= */

header.w-bg-img {
	position: relative;
	background-size: cover;
	background-position: center center;
	height: 25rem;
	width: 100%;
}
.eng-page header.w-bg-img { background-image: url('../images/header-eng.jpg'); }
.about-page header.w-bg-img { background-image: url('../images/header-about.jpg'); }
.careers-page header.w-bg-img { background-image: url('../images/header-careers.jpg'); }
.products-page.hhk header.w-bg-img { background-image: url('../images/header-hhk.jpg'); }
.products-page.ht header.w-bg-img { background-image: url('../images/header-ht.jpg'); }
.products-page.aa header.w-bg-img { background-image: url('../images/header-aa.jpg'); }
.products-page.vv header.w-bg-img { background-image: url('../images/header-vv.jpg'); }
.sign-in-page header.w.bg-img { background-image: url('../images/header-eng.jpg'); }

header.w-bg-img h1 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
@media ( min-width: 768px ) {
	header.w-bg-img { height: 40rem; }
	header.w-bg-img h1 {
		position: absolute;
		bottom: auto; right: auto;
		top: 50%; left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		-moz-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}
}

/*	=================
		Careers
	================= */

.careers-page h3 { text-transform: none; }
.careers-page p.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.careers-page .contact-info { margin-bottom: 5rem; }
@media ( min-width: 768px ) {
	.careers-page .contact-info { margin-bottom: 0; }
}

.careers-page .file-overlay {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}

.careers-page input[type="file"] { opacity: 0; cursor: pointer; }
.careers-page .file-overlay .btn.red {
	text-transform: uppercase;
	padding: 0.7rem 3.5rem;
	margin-top: 0.8rem;
	font-size: 1.6rem;
	display: inline-block;
	width: 100%;
	text-align: center;
	background-color: #FE9A12;
	white-space: nowrap;
	color: #fff;
	cursor: pointer;
}
/*	=================
		Eng Page
	================= */

@media ( min-width: 1100px ) { .eng-page h3 { font-size: 2.2rem; } }
@media ( min-width: 1350px ) { .eng-page h3 { font-size: 2.9rem; } }

.eng-page p.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.eng-page .notes ul {
	list-style-type: none;
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 1.3;
	padding-left: 2.4rem;
	margin-bottom: 5rem;
}
.eng-page .notes li {
	margin-bottom: .7rem;
	text-indent: -2.2rem;
}
.eng-page .notes li:before {
    content: "• ";
    margin-right: 1rem;
    color: #FE9A12;
}

/*	====================
		About Page
	==================== */

.about-page p.big {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.about-page .info .col { margin-bottom: 5rem; }
.about-page .affiliations { text-align: center; padding-top: 0;}
.about-page	.affiliations img { vertical-align: middle; margin: 2.5rem 3rem; display: inline-block; max-width: 100%; }
@media ( min-width: 600px ) { .about-page p.big { width: 90%; margin: auto; } }
@media ( min-width: 680px ) { .about-page p.big { width: 80%; } }
@media ( min-width: 750px ) { .about-page p.big { width: 83%; } }
@media ( min-width: 900px ) { .about-page p.big { width: 100%; } }
@media ( min-width: 1050px ) { .about-page p.big { width: 90%; } }
@media ( min-width: 1220px ) { .about-page p.big { width: 80%; } }
@media (min-width: 768px) {
	.about-page p.big { font-size: 2.3rem; }
	.about-page .info .col { margin-bottom: 0; }
}
@media (min-width: 950px) { .about-page p.big { font-size: 3.5rem; } }

/*	====================
		Product Page
	==================== */

.products-page p.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
@media ( min-width: 950px ) { .products-page p.big { font-size: 2.3rem; } }

.products-page.hhk .sector-info {
	text-align: center;
}
.products-page.hhk .sector-info p.big {
	margin: 0 auto 5rem auto;
}

.products-page.hht .sector-logos {
	/*margin-right: -30px;
	margin-left: -30px;*/
	text-align: justify;
}
.products-page.hhk .sector-logos .sector {
	/*padding-right: 30px;
	padding-left: 30px;*/
	width: 180px;
	margin-bottom: 2rem;
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 700;
	text-transform: uppercase;
}
.products-page.hhk .sector-logos .sector .logo {
	width: 70px;
	margin-bottom: 1.5rem;
}
.products-page.hhk .we-know-quality {
	background-color: #fff;
}
.products-page.hhk .we-know-quality .width-wrap {
	max-width: 1340px;
}

.products-page.hhk .we-know-quality section {
	padding-left: 50px; padding-right: 50px;
}
#hose-bundle-img {
	display: block;
	width: 100%;

	background-image: url('../images/hose-bundle.jpg');
	background-size: cover;
	background-position: center;
}

@media ( min-width: 786px ) {
	.products-page.hhk .sector-info p.big { width: 50%; }
	.products-page.hhk .sector-logos .sector .logo { width: auto; }

	.products-page.hhk .we-know-quality section { width: 66.66667%; float: left; }
	.products-page.hhk .we-know-quality .has-img { width: 33.33333%; float: left; }
}
@media ( min-width: 950px ) {
	.products-page.hhk .sector-logos { width: 75%; margin: auto; }
	.products-page.hhk .we-know-quality section { width: 50%; }
	.products-page.hhk .we-know-quality .has-img { width: 50%; }
}
@media ( min-width: 1200px ) {
	.products-page.hhk .we-know-quality section { padding-left: 0; }
	.products-page.hhk .we-know-quality .pad-wrap { padding-left: 50px; }
	.products-page.hhk .sector-logos { width: 100%; margin: auto; }
}

/*	=================
		Sign-in Page
	================= */

@media ( min-width: 1100px ) { .sign-ig-page h3 { font-size: 2.2rem; } }
@media ( min-width: 1350px ) { .sign-in-page h3 { font-size: 2.9rem; } }

.sign-in-page p.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.sign-in-page .notes ul {
	list-style-type: none;
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 1.3;
	padding-left: 2.4rem;
	margin-bottom: 5rem;
}
.sign-in-page .notes li {
	margin-bottom: .7rem;
	text-indent: -2.2rem;
}
.sign-in-page .notes li:before {
    content: "• ";
    margin-right: 1rem;
    color: #FE9A12;
}

/*	====================
		HHK Steps
	==================== */

.products-page.hhk .our-process { margin-left: 30%; margin-bottom: 5rem; }

.products-page .steps { position: relative; }
.products-page .steps .dots {
	position: absolute;
	top: 0; bottom: 0;
	left: 10%;
	margin-left: -2px;
	margin-bottom: 270px;
	background: url('../images/dot-thin.png');
	width: 7px;
	z-index: 0;
}
@media ( min-width: 768px ) { .products-page .steps .dots { left: 7.5%; } }
@media ( min-width: 950px ) { .products-page .steps .dots { left: 30%; margin-left: 8.2rem; } }
@media ( min-width: 1200px ) { .products-page .steps .dots { left: 25%; } }
.products-page .step {
	clear: both;
	margin-bottom: 10rem;
	position: relative; /* so .dots goes behind .step */
}
.products-page .step:last-child {
	min-height: 315px;
}
.products-page .step:after { content: " "; display: table; clear: both; }

.products-page.hhk .step .img-container {
	float: left;
	width: 0;
}
.products-page.hhk .step .img {
	display: none;
	background-size: cover;
	background-position: center;
	height: 315px;
	max-width: 315px;
}
@media ( min-width: 950px ) {
	.products-page.hhk .step .img { display: block; }
}
.products-page.hhk .step-1 .img { background-image: url('../images/step-0.jpg'); }
.products-page.hhk .step-2 .img { background-image: url('../images/step-1.jpg'); }
.products-page.hhk .step-3 .img { background-image: url('../images/step-2.jpg'); }
.products-page.hhk .step-4 .img { background-image: url('../images/step-3.jpg'); }
.products-page.hhk .step-5 .img { background-image: url('../images/step-4.jpg'); }
.products-page.hhk .step-6 .img { background-image: url('../images/step-5.jpg'); }
.products-page.hhk .step-7 .img { background-image: url('../images/step-6.jpg'); }
.products-page.hhk .step-8 .img { background-image: url('../images/step-7.jpg'); }
.products-page.hhk .step-9 .img { background-image: url('../images/step-8.jpg'); }
.products-page.hhk .step-10 .img { background-image: url('../images/step-9.jpg'); }

.products-page.hhk .step .bullet {
	float: left;
	width: 20%;

	z-index: 1;
}
.products-page.hhk .step .bullet .number {
	font-size: 2.4rem;
	font-weight: 900;
	color: #fff;
	background-color: #FE9A12;
	width: 36px;
	height: 36px;
	border-radius: 25px;
	padding-top: .7rem;
	margin: 0 auto;
	text-align: center;
}
.products-page.hhk .step .info {
	float: left;
	width: 70%;
}
.products-page.hhk .step h3 {
	font-size: 2.0rem;
	font-weight: 700;
	text-transform: none;
}
.products-page.hhk .step ul {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.3;
	list-style-type: disc;
	padding-left: 2.0rem;
}
.products-page.hhk .step ul li {
	margin-bottom: .7rem;
}

@media ( min-width: 600px ) {
	.products-page.hhk .step .bullet .number { width: 50px; height: 50px; font-size: 3.6rem; }
	.products-page.hhk .step h3 { font-size: 3.1rem; }
	.products-page.hhk .our-process { font-size: 4.0rem; }
}
@media ( min-width: 768px ) {
	.products-page.hhk .step .bullet { width: 15%; }
	.products-page.hhk .step .info { width: 75%; }
}
@media ( min-width: 950px ) {
	.products-page.hhk .step .img-container { margin-left: 0; margin-top: -25px; width: 30%; }
	.products-page.hhk .step .img { border-radius: 500px; }
	.products-page.hhk .step .bullet { width: 15%; }
	.products-page.hhk .step .bullet .number { margin-left: 6rem; }
	.products-page.hhk .step .info { width: 55%; }
}
@media ( min-width: 1200px ) {
	.products-page.hhk .our-process { margin-bottom: 10rem; }
	.products-page.hhk .step .img-container { width: 25%; }
	.products-page.hhk .step .bullet { width: 15%; }
	.products-page.hhk .step .info { width: 60%; }
}

 p.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

ul.big {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}


/*	====================
		VMI labels
	==================== */

.labels-form {
    text-align: center;
    /*background-color: #fff;*/
    border: 0;
}
.labels-form form {
    display: inline-block;
    font-size: large;
    min-width: 300px;
    min-width: 30%;
    background-color: #fff;
}

.labels-form body {
    background-color: #fff;
}

.labels-form input {
    width: 100%;
    font-size: large;
    text-align: left;
    border: 0px;
    display: inline;
    /*padding: 0;*/
}

.labels-form input[type=select]{
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    font-size: large;
}


.labels-form input[type=checkbox]{
    width: 30px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 0;
    font-size: x-large;
    text-align: left;    
    vertical-align: middle;
    padding: 0;
}

.labels-form input[type=submit]{
    margin-top: 30px;
    padding: 12px 20px;
    font-size: large;
    width: 30%;
    text-align: center;
}

.labels-form input[type=file]{
    margin-top: 0;
}

.labels-form label{
    padding: 12px;
    font-size: large;    
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 0;
    border: 0;
}

.labels-form p{
    padding: 12px 12px;
    font-size: x-large;    
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;   
    margin-top: 12px;
    /*margin-left: -.6em;*/
    margin-bottom: 0;
}

.labels-form .label-link a{
    text-align: center;
    padding: 12px 12px;
    font-size: x-large;    
    font-family: Helvetica, Arial, sans-serif;
    text-align: center; 
    margin-top: 40px;
    /*margin-left: -.6em;*/
    margin-bottom: 0;
}

.labels-form .form-image img{    
    display: block;
    margin: 12px;
    padding: 12px;
    margin-left: auto;
    margin-right: auto;
}

.labels-form .label-paperSize {    
    text-align: left;   
    font-size: x-large;
    margin: 0;
    /*margin-left: -.6em;*/
    border: 0;
    display: inline;
}

.labels-form h1{
    font-family: Helvetica, Arial, sans-serif; 
}

.labels-form .sample-label{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #021a40;
    padding: 0;
    
    display: block;
    margin: 12px;
}


/*https://www.filamentgroup.com/lab/select-css.html*/
.labels-form .paperSize {
	display: inline; 
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 40%;
	max-width: 100%;
	box-sizing: border-box;
	/*margin-top: 12px;*/
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .2em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
        
}
.labels-form .paperSize::-ms-expand {
	display: none;
}
.labels-form .paperSize:hover {
	border-color: #888;
}
.labels-form .paperSize:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.labels-form .paperSize option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.labels-form .select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.labels-form .select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}

#create-labels-button:hover { 
    background-color: #FE9A12; 
    color: #fff;
}

.pagination {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

#result{
    /*display: table-row;*/
    width: 100%;
}

.item {
  display: table-row;
  width: 100%;
}

.item-image {
  float: left;
}
.item-text {
  text-align: left;
  width: 200%;
}

 /*Clear floats after the columns 
.item-row:after {
  content: "";
  display: table;
  clear: both;
}

 Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) 
@media screen and (max-width: 600px) {
  .item-column {
    width: 100%;
  }
}*/
 
 .form-item-search {
     display: block;
     /*width: 50%;*/
     padding-top: 20px;
     padding-botton: 20px;
     font-size: 320px;
 }
 
 #livesearch-product{
/*     width: 40%;*/
     font-size: 100%;
     display: block;
/*     float: right;
     padding: 10px;*/
 }



 /* Video QR Code scanner */

 div.preview-container {
	display: block;	
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
 }

 /*@media ( max-width: 767px ) {
	div.preview-container {
		display: block;	
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: 100%;
		position: absolute;
	 }
}*/

div.video-preview {
	max-width: 100%;
}

video#preview {
	display: block;	
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	position: absolute;	
	max-height: 250px;
 }

 div.overlay {
	z-index: 9;
	margin: 0px;
	min-width: 160px;
	min-height: 120px;
	width: 80%;
	display:block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	/*top: 50px;*/
	opacity: 0.8;
	visibility: hidden;
	background-color: white;
	border-radius: 3px;
	cursor: pointer;
  }

  div#change-camera {
	z-index: 9;
	margin: 0px;
	max-height: 50px;
	max-width: 30%;
	width: 40px;
	height: 40px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 5px;
	opacity: 0.8;
	background-image: url( '../images/reverse-camera-small.png' );
	cursor: pointer;
  }

  #item-partno {
	margin-bottom: 2px;
  }
  
  #item-description {
	margin-top: 0px;
	margin-bottom: 2px;
  }

  div.overlay p{
	position: 40px;
	width:80%;
	padding-top: 10px;
	padding-bottom: 10px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	cursor: pointer;
  }

  p#item-partno {	
	font-weight: bold;
  }

  /* Cart page */

  img.scan-qr {
	display: block;	
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	max-width: 50%;
	max-width: 100px;
 }



	li.cart {
		/*display: flex; /* equal height of the children */
		display: inline-block; /* equal height of the children */
		max-width: 950px;
	}

	img.cart-image {
		width: 150px;
		height: 150px;
	}

	@media ( min-width: 500px ) {
		img.cart-image {
			width: 100px;
			height: 100px;
		}
	}

	@media ( min-width: 768px ) {
		img.cart-image {
			width: 50px;
			height: 50px;
		}
	}

	li.cart p.cart-item {
		margin-bottom: 0px;
		text-align: left;
	}

	li.cart p.cart-item.header {
		font-size: 2.0rem;
		font-weight: 500;
		line-height: 1.5;
	}

	#orderlineqty {
		text-align: center;
		margin-bottom: 3px;
	}

	input.update {
		text-align: center;
		margin-bottom: 3px;
	}
	
	.quantity {
		text-align: center;
		margin-bottom: 3px;
	}

	.cart-submit {
		max-width: 300px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}

	form.update {
		min-width: 120px;
	}