/* page specific styles */
#hero-box {
	height: 280px;
	/*width: 1068px;
	margin-left: -54px;*/
	margin-bottom: 15px;
	position: relative;
	background: url('//assets.tripplite.com/background-images/bg-digital-signage.jpg') center no-repeat #777;
	background-size: cover;
}

#hero-text {
	position: absolute;
	width: 500px;
	top: 25px;
	left: 48px;
}

#hero-text h1 {
	font-size: 3rem;
	color: #005899;
}

#hero-text .btn {
	margin-top: 10px;
}

#boxBCD { margin-bottom: 15px; }
#boxB { height: 324px; padding: 0 20px; background-color: #eef3f6; border-right: 7px solid #fff; position: relative; }
#boxC { height: 324px; padding: 0 20px; background-color: #eef3f6; border-left: 7px solid #fff; border-right: 7px solid #fff; position: relative; }
#boxD { height: 324px; padding: 0 20px; background-color: #eef3f6; border-left: 7px solid #fff; position: relative; }

/*#boxBimg { position: absolute; bottom: 20px; right: 20px; }*/
#boxCimg { position: absolute; bottom: 15px; right: 15px; }
#boxB .btn-div, #boxC .btn-div, #boxD .btn-div { position: absolute; bottom: 20px; left: 20px; }

#quote { margin-top: 30px; margin-bottom: 30px; }

#boxEFG { }
#boxE { border-right: 5px solid #fff; }
#boxF { border-left: 5px solid #fff; border-right: 5px solid #fff; }
#boxG { padding: 20px; border-left: 5px solid #fff; background-color: #f3f4f6; }

#boxE h4 {
	position: relative;
	top: 25%;
	transform: translateY(25%);
	-webkit-transform: translateY(25%);
	-ms-transform: translateY(25%);
}

#boxF h4 {
	position: relative;
	top: 45%;
	transform: translateY(45%);
	-webkit-transform: translateY(45%);
	-ms-transform: translateY(45%);
}

.bggradbottom {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eef3f6+64,b3cddf+100 */
	background: #eef3f6; /* Old browsers */
	background: -moz-linear-gradient(top, #eef3f6 64%, #b3cddf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(64%,#eef3f6), color-stop(100%,#b3cddf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eef3f6 64%,#b3cddf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eef3f6 64%,#b3cddf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eef3f6 64%,#b3cddf 100%); /* IE10+ */
	background: linear-gradient(to bottom, #eef3f6 64%,#b3cddf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef3f6', endColorstr='#b3cddf',GradientType=0 ); /* IE6-9 */
}

.videoPlayButton {
	width: 36px;
	height: 36px;
	background: url('//assets.tripplite.com/icon/play-button.png');
	position: absolute;
	top: 36px;
	left: 77px;
	z-index: 100;
}

/* EXTRA SMALL */
@media screen and (max-width: 599.98px){
	#boxB, #boxC, #boxD { height: 284px; }
}

/* SMALL */
@media screen and (min-width: 600px) and (max-width: 959.98px){
	#hero-text { width: 300px; }
	#hero-text h1 { font-size: 2.5rem; }
	#boxB { height: 224px; border-right: none; }
	#boxC { height: 284px; border-left: none; border-right: none; }
	#boxD { height: 274px; border-left: none; }
	#boxE { border-right: none; }
	#boxF { border-left: none; border-right: none; }
	#boxG { border-left: none; }
	#boxE h4, #boxF h4 { margin-top: -15px; }
}

/* MEDIUM */
@media screen and (min-width: 960px) and (max-width: 1279.98px){
	#boxBimg, #boxCimg { bottom: 0; right: 0; }

	#boxE h4 {
		font-size: 16px;
		position: relative;
		top: 15%;
		transform: translateY(15%);
		-webkit-transform: translateY(15%);
		-ms-transform: translateY(15%);
	}

	#boxF h4 {
		font-size: 16px;
		position: relative;
		top: 25%;
		transform: translateY(25%);
		-webkit-transform: translateY(25%);
		-ms-transform: translateY(25%);
	}

	#boxG h3 { margin-top: 10px; font-size: 20px; }
}

/* LARGE */
@media screen and (min-width: 1280px){
	#boxDimg { height: 200px; }
}