/*
 *	Promo Block
 */
#promo-block {
	padding: 20px 0 25px;
	position:relative;
}

/* Give the empty spans some deminsion to prevent the page from bouncing when p13 loads */
.promo-row > span {
	display: block;
	padding: 15px 0;
	width: 100%;
	min-height: 50px;
}
@media (min-width: 640px) {
	.promo-row > span {
		float: left;
		width: 33.33333333333333%;
		min-height: 240px;
	}
}

#promo-block a {
	text-decoration: none;
}
.promo-row .promo-box {
	background: #0b223e;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiMjIzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjJiNGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(11,34,62,1) 0%, rgba(15,43,77,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(11,34,62,1)), color-stop(100%,rgba(15,43,77,1)));
	background: -webkit-linear-gradient(top,  rgba(11,34,62,1) 0%,rgba(15,43,77,1) 100%);
	background: -o-linear-gradient(top,  rgba(11,34,62,1) 0%,rgba(15,43,77,1) 100%);
	background: -ms-linear-gradient(top,  rgba(11,34,62,1) 0%,rgba(15,43,77,1) 100%);
	background: linear-gradient(to bottom,  rgba(11,34,62,1) 0%,rgba(15,43,77,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b223e', endColorstr='#0f2b4d',GradientType=0 );
}
.promo-box {
	border:#627c81 solid 1px;
}
.promo-box:hover {
	border-color:#839ba0;
}
.promo-box h2 {
	color:#FFF;
	display: inline-block;
	line-height: 1.25;
	vertical-align:middle;
	width: 100%;
	height: 100%;
}
@media (min-width: 420px) and (max-width: 639px) {
	.promo-title > h2 {
		font-size: 23px;
	}
}
@media (min-width: 640px) {
	.promo-title > h2 {
		text-align: center;
	}
}
@media (max-width: 639px) {
	.promo-row > .promo:nth-of-type(2n+1) .promo-title {
		left: 50%;
	}
	.promo-row > .promo:nth-of-type(2n+1) .promo-img {
		right: 50%;
	}
	.promo-row > .promo.even .promo-title {
		left: 50%;
	}
	.promo-row > .promo.even .promo-img {
		right: 50%;
	}
}