/* -------------------------------------
	HOMEPAGE
------------------------------------- */

/* #hp-header { height: 114px; background: url('../img/bg-header-full.jpg') top center no-repeat; z-index: 200; } */

.interior #wrapper { background-color: #e8eff7; }

#splash { height: 284px; background: url('../img/homepage/bg-splash.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }

#bg-header, #bg-header #header { height: 117px; }
#subHeader { display: none; }

.carousel-control {
	width: 7%;
	margin-top: 110px;
	font-size: 54px;
	border: 0;
	border-radius: 0 0 0 0;
	background: none !important;
	filter: none !important;
}

.carousel-control.left { margin-left: 5px; color: #fff; }
.carousel-control.right { margin-right: 5px; color: #fff; }

.carousel-indicators {
	top: 15px;
	right: -230px;
	height: 40px;
	left: auto !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
	filter: alpha(opacity=40); /* for IE6-IE8 */
	opacity: .4;
}

#panel01 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-ups.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel02 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-pdu.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel03 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-rack.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel04 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-kvm.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel05 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-cooling.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel06 { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-cable.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }
#panel06inv { width: 960px; height: 284px; background: url('../img/homepage/bg-splash-inverter.jpg') top left no-repeat; padding-bottom: 0; margin-bottom: 0; overflow: none; }

.splashHeadline {
	position: absolute;
	top: 50px;
	left: 60px;
	color: #fff;
	font-family: "Lato", Arial, sans-serif;
	font-weight: 400;
}

#panel01 .splashHeadline { width: 240px; font-size: 26px !important; line-height: 32px !important; }
#panel02 .splashHeadline { width: 240px; font-size: 28px !important; line-height: 34px !important; }
#panel03 .splashHeadline { width: 240px; font-size: 26px !important; line-height: 32px !important; }
#panel04 .splashHeadline { width: 240px; font-size: 26px !important; line-height: 30px !important; }
#panel05 .splashHeadline { width: 240px; font-size: 24px !important; line-height: 30px !important; }
#panel06 .splashHeadline { width: 240px; font-size: 24px !important; line-height: 30px !important; }
#panel06inv .splashHeadline { width: 240px; font-size: 24px !important; line-height: 30px !important; }

.splashMsg { display: none; }

/* #panel01 #splashNav { margin-top: 45px; margin-right: 25px; } */

/* Orange 'Explore ...' buttons */
#panel01 .btn-panel,
#panel02 .btn-panel,
#panel03 .btn-panel,
#panel04 .btn-panel,
#panel05 .btn-panel,
#panel06 .btn-panel,
#panel06inv .btn-panel {
	position: absolute;
	top: 215px;
	left: 60px;
	padding: 4px 20px;
	font-family: "Lato", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #fff;
	text-shadow: none;
	border-radius: 0 0 0 0;
}

#panel01 .btn-panel:hover, #panel02 .btn-panel:hover, #panel03 .btn-panel:hover, #panel04 .btn-panel:hover, #panel05 .btn-panel:hover, #panel06 .btn-panel:hover, #panel06inv .btn-panel:hover { background-position: 0 -28px; }

#panel01 .btn-panel:hover, #panel01 .btn-panel:active,
#panel02 .btn-panel:hover, #panel02 .btn-panel:active,
#panel03 .btn-panel:hover, #panel03 .btn-panel:active,
#panel04 .btn-panel:hover, #panel04 .btn-panel:active,
#panel05 .btn-panel:hover, #panel05 .btn-panel:active,
#panel06 .btn-panel:hover, #panel06 .btn-panel:active,
#panel06inv .btn-panel:hover, #panel06inv .btn-panel:active { background-color: #9b341d; color: #fff; }

#subsplash { background: url('../img/homepage/bg-subsplash.jpg') top left no-repeat #e8eff7; }
#deck { min-height: 170px; }
.card { width: 122px; margin-left: 10px; float: left; }
.card:first-child { margin-left: 0; }

#upsCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: 0 0; }
#pduCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -122px 0; }
#rackCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -244px 0; }
#kvmCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -366px 0; }
#coolingCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -488px 0; }
#cableCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -610px 0; }
#inverterCard .imgShot { display: inline-block; width: 122px; height: 138px; overflow: hidden; background:url('../img/homepage/hp-cards.png') no-repeat top left; background-position: -732px 0; }

#upsCard:hover .imgShot { background-position: 0 -140px; }
#pduCard:hover .imgShot { background-position: -122px -140px; }
#rackCard:hover .imgShot { background-position: -244px -140px; }
#kvmCard:hover .imgShot { background-position: -366px -140px; }
#coolingCard:hover .imgShot { background-position: -488px -140px; }
#cableCard:hover .imgShot { background-position: -610px -140px; }
#inverterCard:hover .imgShot { background-position: -732px -140px; }

.card .btn { line-height: 22px; font-size: 14px; margin: 0; padding: 2px 4px 2px 4px; text-align: left; border-radius: 0 0 0 0; color: #fff; background-color: #3f8fd1; border: 1px solid #376286; }
.card .btn:hover, .card .btn:active { background-color: #2f75b3 !important; }
.card i {margin-top: 2px; }

#splashNav { list-style-type: none; width: 130px; text-align: right; margin-top: 0; }
#splashNav li { background: url('../img/homepage/splashNav-sep.png') top right no-repeat; padding: 8px 0; }
#splashNav li:first-child { background: none; padding-top: 0; }
#splashNav li div { padding: 0 6px 0 6px; }

#splashNav li a { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 12px; line-height: 19px; }

#splashNav .paleblue { color: #3973b1; }

/* styles for regional content include */
#regionSnippet { min-height: 184px; }
#regionSnippet h5 { padding: 0; margin: 0; font-family: "Lato", Arial, sans-serif; font-weight: 700; font-size: 15px; }
#regionSnippet .caption { padding: 6px; }
#regionSnippet .rtl { text-align:right; } /*arabic: right to left */
#regionSnippet h4 { padding: 0; margin: 0 0 5px 0; text-transform: uppercase; color: #4F87C7; font-family: "Lato", Arial, sans-serif; font-weight: 700; }
#regionSnippet ul { margin-left: 16px; list-style-type: square; color: #ccddf1; }
#regionSnippet li {  line-height: 16px; padding-bottom:5px; }
#regionSnippet li a, #regionSnippet p {
	color: #666;
	font-size: 11px;
	font-family: "Lato", Arial, sans-serif;
	font-weight: 400;
}

/* PHONE AND BELOW */
@media (max-width: 480px) {
	#newsRight { margin: 12px 0; }
	#regionSnippet img { width: 320px; }

	#splashNav { margin-top: 20px; }
	#splashNav li { padding: 4px 0; }
	#splashNav .paleblue { font-size: 11px; }

	.makeRelative {
		margin-bottom: 15px;
	}
	.makeRelative .caption {
		/*width: 320px;*/
	}
	#hpIcoBtns { margin-bottom: 20px; }

	.card { width: 128px; }
	#tabletLinks {
		text-align: center;
		margin: 20px 0 10px 0;
		padding: 0 15px;
	}
}

/* BETWEEN PHONE AND SMALL TABLETS */
@media (min-width: 481px) and (max-width: 767px) {

	#splashNav { margin-top: 10px; }
	#splashNav li { padding: 4px 0; }
	#splashNav .paleblue { font-size: 11px; }

	.makeRelative {
		margin-bottom: 15px;
	}
	.makeRelative .caption {
		width: 320px;
	}

	#hpIcoBtns { margin-bottom: 20px; height: 100px; }

	#tabletLinks {
		text-align: center;
		margin: 20px 0 10px 0;
		padding: 0 15px;
	}
}

/* BETWEEN SMALL AND LARGE TABLETS */
@media (min-width: 768px) and (max-width: 991px) {
	.carousel-control.left { margin-left: -5px; color: #fff; }
	.carousel-control.right { margin-right: -5px; color: #fff; }

	.nav-collapse { clear: both; }
	.nav-collapse .dropdown-menu { position: static; }

	#splashNav { margin-top: 10px; }
	#splashNav li { padding: 4px 0; }
	#splashNav .paleblue { color: #3973b1; }

	#newsRight img { margin: 0 10px; }
	#regionSnippet { height: 184px; padding-left: 35px; }
	#regionSnippet .caption, #regionSnippet img { width: 208px; }

	.makeRelative {
		margin-bottom: 15px;
	}
	.makeRelative .caption {
		width: 217px;
	}

	.card { width: 133px; }
	#tabletLinks {
		text-align: center;
		margin: 20px 0 10px 0;
		padding: 0 15px;
	}

	#hpIcoBtns { height: 1px; }
}

/* DESKTOP */
@media (min-width: 992px) {
	.carousel-control.left { margin-left: -10px; color: #fff; }
	.carousel-control.right { margin-right: -10px; color: #fff; }

	#newsLeft img, #newsRight img { width: 184px; height: 184px; }

	#splashNav { margin-top: 0 !important; }
	#splashNav li { padding: 5px 0; }

	#splashNav a .paleblue { color: #fff; text-shadow: 1px 1px 2px #036;}
	#splashNav a:hover .paleblue { color: #a9e6ff; }

	.splashMsg {
		display: block;
		position: absolute;
		color: #e0e9f5;
		font-family: "Lato", Arial, sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
	}

	#panel01 .splashMsg { width: 210px; top: 70px; right: 50px; }
	#panel02 .splashMsg { width: 190px; top: 70px; right: 60px; }
	#panel03 .splashMsg { width: 220px; top: 70px; right: 70px; }
	#panel04 .splashMsg { width: 260px; top: 80px; right: 40px; }
	#panel05 .splashMsg { width: 220px; top: 80px; right: 70px; }
	#panel06 .splashMsg { width: 260px; top: 80px; right: 55px; }
	#panel06inv .splashMsg { width: 250px; top: 90px; right: 50px; }

	#panel01 .splashHeadline { width: 290px; font-size: 30px !important; line-height: 36px !important; }
	#panel02 .splashHeadline { width: 290px; font-size: 30px !important; line-height: 36px !important; }
	#panel03 .splashHeadline { width: 340px; font-size: 30px !important; line-height: 36px !important; }
	#panel04 .splashHeadline { width: 390px; font-size: 32px !important; line-height: 36px !important; }
	#panel05 .splashHeadline { width: 320px; font-size: 30px !important; line-height: 36px !important; }
	#panel06 .splashHeadline { width: 330px; font-size: 30px !important; line-height: 36px !important; }
	#panel06inv .splashHeadline { width: 330px; font-size: 30px !important; line-height: 36px !important; }

	#splashNav a .paleblue { color: #fff; }
	#splashNav a:hover .paleblue { color: #a9e6ff; }

	#hpIcoBtns { margin-top: 10px; }
	#hpIcoBtns img { margin-bottom: 12px; }

	.makeRelative .caption { padding: 4px 10px; }

	h5.paleblue { margin-top: 5px; margin-bottom: 5px; }
}