/* HERO STYLES */
.hero					{ height: 300px; }


/* MAIN CONTENT STYLES */
.content				{ overflow: auto; }
.content h2, .content .slogan { margin: 0 1.25%; }
.content .slogan		{ font-size: 2.6em; line-height: 1.3em; }
.content .col			{ float: left; width: 30.33%; margin: 5em 1.25% 0; height: 520px; }
.content .imgHldr		{ padding: 0 0 6em 0; background: #fff url('../images/global/shadowRight.png') no-repeat bottom right; }
.content .imgHldr img	{ width: 100%; }
.content h4				{ margin-top: -2em;	padding-bottom: 0.2em; }
h4 a					{ color: #000; }
h4 a:hover				{ color: #5090ad; }
h4 a:active				{ color: #235770; }
.content p a			{ display: inline-block; padding-top: 0.5em; }
.notify					{ margin: 3em 1.25%;  }
.imgHldr a img:hover 	{ box-shadow: 0px 0px 10px rgb(80, 144, 173); }

.imgHldr a img:active 	{ box-shadow: 0px 0px 10px rgb(35, 87, 112); }


/* ///////////////////////////////////////////////////////////// */
/* ///////////////////// MEDIA QUERIES ///////////////////////// */

/* TABLETS (IN PORTRAIT) /////////////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 959px) {
	.content .slogan	{ font-size: 1.6em; line-height: 1.5em; }
	.content .col		{ float: left; width: 47%; margin: 3em 1.5% 0; height: 400px; }
}

/* TABLETS (IN PORTRAIT) < 800PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 800px) {
}

/* TABLETS (IN PORTRAIT) < 700PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 700px) {
}

/* TABLETS (IN PORTRAIT) < 600PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 600px) {
}

/* MOBILE PHONES & TABLETS (SHARED STYLES) ///////////////////// */
@media screen and (max-width: 959px) {
	.content .container	{ height: 200px; overflow: hidden; }
	.content .imgHldr img { width: 100%; margin-top: -20%; }
}

/* MOBILE PHONES <568px //////////////////////////////////////// */
@media screen and (max-width: 568px) {
	.hero				{ height: 200px; background-size: 1400px; }
	.hero h1			{ font-size: 3.8em; }
	.content h2, .content .slogan { margin: 0; }
	.content .slogan	{ font-size: 1.6em; line-height: 1.5em; }
	.content .col		{ float: none; width: 100%; margin: 2em 0 0 0; height: auto; }
	.content .imgHldr	{ padding: 0 0 6em 0; margin-bottom: -6em; }
	.content h4			{ margin-top: 0.4em; padding-bottom: 0.2em; }
	.content p a		{ display: inline-block; padding-top: 0; }	
}

/* MOBILE PHONES <480px //////////////////////////////////////// */
@media screen and (max-width: 480px) {
	.content .slogan	{ font-size: 1.5em; }
}

/* MOBILE PHONES <350px //////////////////////////////////////// */
@media screen and (max-width: 350px) {
	.content .slogan	{ font-size: 1.4em; }
}