#hero {
	height: 288px;
	background: url('//assets.tripplite.com/background-images/bg-cable-mgmt.jpg') top left no-repeat #001d3f;
	position: relative;
}

#hero-text {
	width: 390px;
	position: absolute;
	top: 30px;
	right: 40px;
	color: #fff;
}

#hero-text h1 {
	font-size: 3rem;
	font-weight: 500 !important;
	line-height: 1;
	margin-bottom: 16px;
}

#hero-text p {
	font-size: 1.35rem;
}

#hero-text a {
	font-style: italic;
	color: #86c4f3;
}

#hero-text a:hover,
#hero-text a:active,
#hero-text a:focus {
	text-decoration: none;
	border-bottom: 1px dotted #86c4f3;
}

#rack-mgmt .nav-tabs {
	border-bottom: 3px solid #538ac2;
}

#rack-mgmt .nav-tabs li {
	width: 25%;
	padding: 10px 7px 0 7px;
}

#rack-mgmt .nav-tabs li:first-of-type {
	padding-left: 15px;
}

#rack-mgmt .nav-tabs li:last-of-type {
	padding-right: 15px;
}

#rack-mgmt .nav-tabs li.active a {
	border-top: 3px solid #538ac2;
	border-right: 3px solid #538ac2;
	border-left: 3px solid #538ac2;
}

#rack-mgmt .nav-tabs li a {
	padding-bottom: 15px;
	color: #fff;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	border-left: 3px solid #fff;
	border-bottom: 4px solid #fff;
}

#rack-mgmt .nav-tabs li.active a#tab-cts { border-bottom: 4px solid #323e47; }
#rack-mgmt .nav-tabs li.active a#tab-frs { border-bottom: 4px solid #7893a6; }
#rack-mgmt .nav-tabs li.active a#tab-cls { border-bottom: 4px solid #8fb3bf; }
#rack-mgmt .nav-tabs li.active a#tab-cm { border-bottom: 4px solid #9fbdd7; }

.affix + .body-content #rack-mgmt .nav-tabs li.active a#tab-cts { border-bottom: 5px solid #323e47; }
.affix + .body-content #rack-mgmt .nav-tabs li.active a#tab-frs { border-bottom: 5px solid #7893a6; }
.affix + .body-content #rack-mgmt .nav-tabs li.active a#tab-cls { border-bottom: 5px solid #8fb3bf; }
.affix + .body-content #rack-mgmt .nav-tabs li.active a#tab-cm { border-bottom: 5px solid #9fbdd7; }

#rack-mgmt .nav-tabs li a#tab-cts { background: url('//assets.tripplite.com/background-images/tab-cts.jpg') top center no-repeat #323e47; }
#rack-mgmt .nav-tabs li a#tab-frs { background: url('//assets.tripplite.com/background-images/tab-frs.jpg') top center no-repeat #7893a6; }
#rack-mgmt .nav-tabs li a#tab-cls { background: url('//assets.tripplite.com/background-images/tab-cls-01.jpg') top center no-repeat #8fb3bf; }
#rack-mgmt .nav-tabs li a#tab-cm  { background: url('//assets.tripplite.com/background-images/tab-cm.jpg')  top center no-repeat #9fbdd7; }
#rack-mgmt .nav-tabs li a { background-size: contain; padding-top: 100px; }

#rack-mgmt .nav-tabs li h3 {
	font-size: 1.1rem;
	font-weight: 500 !important;
	margin-bottom: 0;
	text-transform: uppercase;
}

#rack-mgmt .nav-tabs li h4 {
	font-size: 1rem;
	margin-bottom: 0;
}

#rack-mgmt .tab-pane { padding: 15px 30px; }
#rack-mgmt .tab-pane h3 { font-size: 2.25rem; font-weight: 500 !important; }

.rack-mgmt-sidebar-cta .media-object span { font-size: 2.2rem; color: #5f6a7c; }
.rack-mgmt-sidebar-cta .media-body a { display: inline-block; font-size: 0.8rem; line-height: 17px; font-weight: 700; color: #0167b2; }
.rack-mgmt-sidebar-steps h3 { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem !important; font-weight: 500 !important; text-transform: uppercase; }
.rack-mgmt-sidebar-steps h4 { margin-bottom: 5px; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem !important; font-weight: 500 !important; text-transform: uppercase; color: #577388; }
.rack-mgmt-sidebar-steps h5 { margin-bottom: 5px; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem !important; font-weight: 400 !important; }
.rack-mgmt-sidebar-steps p { font-weight: 400 !important; font-size: 0.9rem; }

.callout {
	position: absolute;
	padding: 5px;
	width: 130px;
	font-size: 0.8rem;
	color: #4b77a9;
	border: 1px dotted #4b77a9;
	text-align: center;
}
.callout .callout-btm,
.callout .callout-top {
	height: 1px;
}
.callout .callout-btm:after {
	content: " ";
	border-top: 11px solid #4b77a9;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	position: relative;
	top: 16px;
	right: 0;
}
.callout .callout-top:after {
	content: " ";
	border-bottom: 11px solid #4b77a9;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	position: relative;
	right: 0;
}

.system-components {
	position: absolute;
	right: 30px;
	bottom: -55px;
	width: 200px;
	padding: 10px 15px;
	background-color: #edeeee;
	opacity: 0.9;
	filter: alpha(opacity=90);
}
.system-components p { margin-bottom: 5px; }
.system-components a {
	display: block;
	font-size: 0.85rem;
}

#cts-image {
	position: relative;
	min-height: 550px;
	background: url('//assets.tripplite.com/pages/cable-tray-system.jpg') bottom center no-repeat;
	background-size: contain;
}

#cts-callout-01 { top: 340px; left: 10px;  }
#cts-callout-02 { top: 180px; left: 170px; }
#cts-callout-03 { top: 10px;  left: 290px; }
#cts-callout-04 { top: 50px;  left: 520px; }
#cts-callout-05 { top: 200px; left: 740px; }
#cts-callout-06 { top: 490px; left: 420px; }
#cts-callout-07 { top: 475px; left: 220px; }
#cts-callout-06.callout .callout-top:after { top: -129px; }
#cts-callout-07.callout .callout-top:after { top: -110px; }

#frs-image {
	position: relative;
	min-height: 470px;
	background: url('//assets.tripplite.com/pages/fiber-routing-system.jpg') bottom center no-repeat;
	background-size: contain;
}
#frs-system-components { bottom: -60px; }

#frs-callout-01 { top: 45px;  left: 45px;  }
#frs-callout-02 { top: 10px;  left: 330px; }
#frs-callout-03 { top: 180px; left: 660px; }
#frs-callout-04 { top: 440px; left: 340px; }
#frs-callout-05 { top: 280px; left: 140px; }
#frs-callout-04.callout .callout-top:after { top: -110px; }
#frs-callout-05.callout .callout-top:after { top: -110px; }

#cable-ladder-system-table img {
	width: 80%;
}
#cable-ladder-system-table .system-components {
	position: relative;
	right: unset;
	bottom: unset;
}

#cable-management .thumbnail {
	border: 0;
}
#cable-management .thumbnail img {
	margin-bottom: 20px;
	padding: 15px;
}
#cable-management .thumbnail h2 {
	display: block;
	padding: 15px 0 5px 0;
	margin: 0;
	height: 48px;
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	color: #454b4f !important;
	background-color: #dbe0e4 !important;
}
#cable-management .thumbnail .overlayLink {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#cable-management .thumbnail .overlayLink:hover ~ h2 {
	color: #fff !important;
	background-color: #0b66a3 !important;
}
.need-help { cursor: pointer; }

/* XS */
@media screen and (max-width: 599.98px){
	#hero-text { width: auto; position: relative; right: auto; padding: 10px 20px; }
	#hero-text h1 { font-size: 2.6rem; }
	#hero-text p { font-size: 1.2rem; }
	#rack-mgmt .nav-tabs { border-bottom-width: 0 !important; }
	#rack-mgmt .nav-tabs li { width: 50%; height: 140px; }
	#rack-mgmt .nav-tabs li:first-of-type { padding-left: 7px; }
	#rack-mgmt .nav-tabs li:last-of-type { padding-right: 7px; }
	#rack-mgmt .nav-tabs li a {	padding-top: 10px; border-bottom: 3px solid #fff; text-shadow: 0px 0px 14px rgba(5, 5, 5, 1); }
	#rack-mgmt .nav-tabs li.active a,
	.affix + .body-content #rack-mgmt .nav-tabs li.active a { border-bottom: 3px solid #538ac2 !important; }
	#rack-mgmt .nav-tabs li h3 { font-size: 1rem; margin-top: 10px; }
	#rack-mgmt .nav-tabs li h4 { font-size: 1rem; }
	#cts-image { min-height: 160px; }
	#frs-image { min-height: 150px; }

	#cts-system-components { right: 0; bottom: -200px; }
	#frs-system-components { right: 0; bottom: -200px; }

	.callout { display: none; }
	.rack-mgmt-sidebar { padding-top: 230px; }
	#cable-ladder-system .rack-mgmt-sidebar { padding-top: 10px; }
	#cable-management .rack-mgmt-sidebar { padding-top: 10px; }
	.rack-mgmt-sidebar-cta .media-body a { margin-top: 5px; line-height: 40px; }
	#cable-ladder-system-table { margin-top: -30px; margin-bottom: 20px; }
	#cable-ladder-system-table #srcableladder { margin-top: 60px; }
	#cable-ladder-system-table .system-components { margin-left: -20px; }
	#cable-management .thumbnail { border: 1px solid #dbe0e4; }
	#cable-management .thumbnail img { margin-bottom: 0; }
	#cable-management .thumbnail h2 { padding-top: 0; background-color: #fff !important; }
}

/* SM */
@media screen and (min-width: 600px) and (max-width: 959.98px){
	#rack-mgmt .nav-tabs { border-bottom-width: 0 !important; }
	#rack-mgmt .nav-tabs li { width: 50%; height: 102px; }
	#rack-mgmt .nav-tabs li:first-of-type { padding-left: 7px; }
	#rack-mgmt .nav-tabs li:last-of-type { padding-right: 7px; }
	#rack-mgmt .nav-tabs li a {	padding-top: 10px; border-bottom: 3px solid #fff; text-shadow: 0px 0px 14px rgba(5, 5, 5, 1); }
	#rack-mgmt .nav-tabs li.active a,
	.affix + .body-content #rack-mgmt .nav-tabs li.active a { border-bottom: 3px solid #538ac2 !important; }
	#rack-mgmt .nav-tabs li h3 { font-size: 1.2rem; margin-top: 10px; }
	#rack-mgmt .tab-pane { padding: 15px 10px; }
	#cts-image { min-height: 300px; }
	#frs-image { min-height: 280px; }
	.callout { display: none; }
	.rack-mgmt-sidebar { padding-top: 100px; }
	#cable-ladder-system .rack-mgmt-sidebar { padding-top: 20px; }
	#cable-management .rack-mgmt-sidebar { padding-top: 10px; }
	.rack-mgmt-sidebar-cta .media-body a { margin-top: 5px; line-height: 40px; }
	#cable-ladder-system-table #srcableladder { margin-top: -10px; }
	#cable-ladder-system-table .system-components { width: 175px; }
	#cable-management .thumbnail h2 { font-size: 0.95em; }
	#cable-management .thumbnail h2.dbl { padding-top: 8px; }
}

/* MD */
@media screen and (min-width: 960px) and (max-width: 1279.98px){
	#rack-mgmt .nav-tabs li h3 { font-size: 0.9rem; }
	#rack-mgmt .nav-tabs li h4 { font-size: 0.9rem; }
	.rack-mgmt-sidebar { margin-top: 80px; border-top: 1px solid #d6d6d6; }
	.rack-mgmt-sidebar-cta { padding-top: 30px; }
	.rack-mgmt-sidebar-cta .media-body a { margin-top: 17px !important; }
	#cable-management .thumbnail h2 { font-size: 0.9em; }
}

/* LG */
@media screen and (min-width: 1280px){
	.rack-mgmt-sidebar .col-md-push-9 { left: unset; }
	.rack-mgmt-sidebar .col-md-pull-3 { right: unset; }
	.rack-mgmt-sidebar-cta { padding-bottom: 20px; }
	.rack-mgmt-sidebar-steps { border-top: 1px solid #d6d6d6; }
	#cable-management .thumbnail h2.dbl { padding-top: 5px; }
}