/* PAGE SPECIFIC STYLES */
#hero-box {
	height: 137px;
	margin-bottom: 15px;
	position: relative;
	background: url('//assets.tripplite.com/background-images/bg-digital-signage-solutions.jpg') center no-repeat;
	background-size: cover;
}

#hero-text {
	position: absolute;
	top: 20px;
	left: 48px;
	text-align: left;
}

#hero-text h1 {
	font-size: 42px;
	line-height: 48px;
	margin-top: 0;
	color: #005899;
}

#cat5cat6cables {
	background-color: #808080;
	color: #fff;
	border: 1px solid #fff;
	margin: 5px 0;
	padding: 0 15px 10px 15px;
}

.diagrams {
	margin-bottom: 15px;
	padding: 15px 30px;
	background-color: #f6f6f6;
	border: 1px solid #eee;
}

.lightbgblue { background-color: #ecf3f7; }
.lightbggrey { background-color: #f3f4f6; }

ol.bigNum { margin-left: 0; counter-reset: listCounter; }
ol.bigNum > li { position: relative; list-style-type: none; padding: 0 0 2px 45px; line-height:20px; /*min-height: 75px;*/ border-bottom: 1px solid #ccddf1; }
ol.bigNum > li:before { counter-increment: listCounter; position: absolute; left: 0; top: 0; font: bold 32px/1 Sans-Serif; color: #cdd8e3; }
ol.bigNum.q1 > li:before { content: "1"; }
ol.bigNum.q2 > li:before { content: "2"; }
ol.bigNum.q3 > li:before { content: "3"; }
ol.bigNum.q4 > li:before { content: "4"; }
ol.bigNum.q5 > li:before { content: "5"; }
ol.bigNum.q6 > li:before { content: "6"; }
ol.bigNum > li.last { border-bottom: none; }

ol.bigNum .panel-group { margin-bottom: 0; }
ol.bigNum .panel { border: 0; -webkit-box-shadow: none; box-shadow: none; }
ol.bigNum .panel-heading { background-color: #ecf3f7 !important; padding-top: 6px;}
ol.bigNum .panel-body { border-top: 0 !important; background-color: #f8fbfc; padding: 15px 15px 5px 15px; }

/* USED BY HOW-TO-CHOOSE-DIGITAL-SIGNAGE-HARDWARE-SOLUTIONS */
/* TODO: does this affect other pages */
#helpTopics { margin-left: 0; counter-reset: listCounter; }
#helpTopics ol { margin-left: 10px; }
#helpTopics li { position: relative; list-style-type: none; padding: 5px 0 8px 45px; margin-bottom: 10px; line-height:20px; min-height: 45px; }
#helpTopics li:before { content: counter(listCounter); counter-increment: listCounter; position: absolute; left: 0; top: 0; font: bold 50px/1 Sans-Serif; color: #CDD8E3; }
#helpTopics p { padding: 0; margin-bottom: 0; }
#helpTopics li a:link,
#helpTopics li a { color: #4F87C7; text-decoration: none; }
#helpTopics li a:hover { color: #0072c6; text-decoration: underline; }
#helpTopics a.topic { font-size: 18px; font-weight: 400; line-height: 22px; padding: 0; margin: 0; }
#helpTopics .badge { padding: 3px; font-size: 15px; }

#rightSidebar { margin-bottom: 0; }
#rightSidebar .bullets li { margin-bottom: 0; }
#rightSidebar h4 { padding: 0; margin: 0; text-transform: uppercase; }
#rightSidebar .h4 { padding: 0; margin: 0; text-transform: uppercase; }
#rightSidebar h5 { font-size: 18px; font-weight: 500 !important; color: #666; padding: 0; margin: 20px 0 5px 0; text-transform: uppercase; }
#rightSidebar .h5 { font-size: 18px; font-weight: 500 !important; color: #666; padding: 0; margin: 20px 0 5px 0; text-transform: uppercase; }

/* EXTRA SMALL */
@media screen and (max-width: 599.98px){
	#hero-box { height: 250px; background-size: cover; }
	#hero-text { left: 20px; }
	#hero-text h1 { line-height: 40px; }
}

/* SMALL */
@media screen and (min-width: 600px) and (max-width: 959.98px){
	#hero-box { width: 100%; margin-left: 0; margin-bottom: 0; }
	#hero-text { width: 350px; }
	#hero-text h1 { font-size: 1.5rem; line-height: 28px; }
	#hero-text h4 { font-size: 1rem; }
	#hero-text .h4 { font-size: 1rem; }
	h2 { font-size: 1.5rem; }
}

/* MEDIUM */
@media screen and (min-width: 960px) and (max-width: 1279.98px){
	#hero-box { height: 144px; }
}

/* LARGE */
@media screen and (min-width: 1280px){
	#hero-text h1 { font-size: 32px; }
}