/* 
main orange: 	#ff6700 
light grey: 	#d6d6d6
medium grey:	#808080
dark grey: 		#9c9c9c

font weights:;	300/400
*/

body {
	font-family: 'IBM Plex Sans', sans-serif;
	margin: 0;
}
.links {color: #ff6700;}

h3 {
	text-transform: uppercase;
	color: #808080;
	font-size: 22px;
	margin-top: 0;
	margin-bottom: 15px;
}
@media (max-width: 991px) {
	h3 {
		font-size: 36px;
	}
}

p, ul {
	font-size: 18px;
	color: #808080;
	font-weight: 300;
	line-height: 1.5;
}
@media (max-width: 991px) {
	p, ul {
		font-size: 22px;
	}
}

p {
	margin-top: 15px;
}

ul {
	margin-top: 15px;
	padding-left: 20px;
}
li {
	margin-bottom: 10px;
}

.container-fluid {
	padding: 0;
}

.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.max100 {
	max-width: 100%;
}

.hide {
	display: none !important;
}
.show {
	display: block !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.desktop-hidden-img {
	display: none;
	max-width: 100%;
}
@media (max-width: 991px) {
	.desktop-hidden-img {
		display: block;
	}
}

.mobile-hidden-img {
	display: block;
	max-width: 100%;
}
@media (max-width: 991px) {
	.mobile-hidden-img {
		display: none;
	}
}

.btn {
	padding: 25px 55px;
	font-size: 22px;
	text-decoration: none;
	display: inline-block;
	transition: all .25s;
}
@media (max-width: 991px) {
	.btn {
		width: 100%;
		text-align: center;
	}
}

/******************************/
/******************************/
/* HEADER */
/******************************/
/******************************/
.header {
	background: #ff6700;
	height: 150px;
}
@media (max-width: 991px) {
	.header {
		height: 65px;
	}
}

#header-logo {
	max-width: 430px;
	margin-top: 30px;
}
@media (max-width: 991px) {
	#header-logo {
		max-width: 200px;
		margin-top: 15px;
	}
}
.hamburger {
	display: none;
}
@media (max-width: 991px) {
	.hamburger {
		cursor: pointer;
		display: inline-block;
		font-size: 32px;
		color: white;
		position: absolute;
		top: 0;
		right: 10px;
		padding: 15px 10px 10px 20px;
	}
}
.fa-times {
	position: relative;
	top: 5px;
	right: 3px;
}

/* MAIN NAV */
ul.nav {
	list-style: none;    
	display: block;
    padding: 0;
    margin: 50px 0 0 0;
    z-index: 9;
}
@media (max-width: 991px) {
	ul.nav {
		display: none;
		position: absolute;
		width: 100%;
		height: auto;
		background: #ff6700;
		left: 0;
		top: 10px;
		text-align: left;
		margin: 0;
	}
}

ul.nav li {
	display: inline-block;
	position: relative;
}
@media (max-width: 991px) {
	ul.nav li {
		display: block;
		padding: 10px 0;
		border-bottom: solid 1px rgba(255,255,255,.34);
		width: 90%;
		margin: 0 auto;
	}
	ul.nav li:last-of-type {
		border-bottom: none;
		margin-bottom: 10px;
	}
}

ul.nav li a {
	padding: 10px 15px;
	color: white;
	text-decoration: none;
	font-weight: 300;
	font-size: 20px;
	display: inline-block;
	transition: .25s;
}
@media (max-width: 1199px) {
	ul.nav li a {
		font-size: 18px;
	}
}
@media (max-width: 991px) {
	ul.nav li a {
		font-size: 32px;
		padding: 10px 15px;
	}
}

ul.nav li a:hover, ul.nav li a:focus, ul.nav li a.hover {
	background: #ca6026;
}

ul.nav li a.active {
	background: #ca6026;
	color: white;
}

/* SUBNAV */
ul.nav li ul.sub-nav {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 33px;
	margin-left: -165px;
	background: #9c9c9c;
	width: 330px;
	padding: 0 20px;
	z-index: 9;
	opacity: 1;
	pointer-events: all;
	transition: .25s all;
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav {
		position: relative;
		top: auto;
		left: auto;
		margin-top: 10px;
		margin-left: 0;
		background: transparent;
		width: auto;
	}
}

ul.nav li ul.sub-nav:before {
	content:"\A";
    border-style: solid;
    border-width: 16px 18px 16px 0;
    border-color: transparent #9c9c9c transparent transparent;
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -8px;
    transform: rotate(90deg);
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav:before {
		display: none;
	}
}

ul.nav li ul.sub-nav li {
	display: block;
	line-height: normal;
	padding: 10px 0;
	border-bottom: solid 1px rgba(255,255,255,.34);
	margin-bottom: 0;
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav li {
		border-bottom: none;
		margin-left: 20px;
	}
}

ul.nav li ul.sub-nav li:last-of-type {
	border-bottom: none;
}

ul.nav li ul.sub-nav li a {
	padding: 0;
	display: block;
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav li a {
		font-size: 18px;
	}
}

ul.nav li ul.sub-nav li a:hover {
	background: transparent;
}

ul.nav li ul.sub-nav li a.active, ul.nav li ul.sub-nav li a.active:focus {
	background: black;
	display: inline-block;
	padding: 2px 8px;
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav li a.active, ul.nav li ul.sub-nav li a.active:focus {
		background: #ca6026;
	}
}

#sub-nav-hover:after {
	content: '';
	width: 100%;
	height: 50px;
	display: block;
	background: transparent;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.nav li ul.sub-nav.hide-sub-nav {
	top: 35%;
	opacity: 0;
	pointer-events: none;
}
@media (max-width: 991px) {
	ul.nav li ul.sub-nav.hide-sub-nav {
		opacity: 1;
		pointer-events: all;
	}
}


/******************************/
/******************************/


/******************************/
/******************************/
/* MAIN BODY */
/******************************/
/******************************/

/******************************/
/******************************/
/* HEROS */
.hero-container {
	position: relative;
}
.hero-container-full {
	margin: 0 !important;
}

.hero-home, .hero-inner {
	padding: 0 !important;
}

.hero-home img, .hero-inner img {
	max-width: 100%;
}

.hero-text {
	position: absolute !important;
	top: 80px;
	left: 95px;
	background: transparent;
}

.hero-text-inner {
	position: absolute !important;
	top: 100px;
	text-align: center;
	background: transparent;
	width: 100%;
}

@media (max-width: 1199px) {
	.hero-text {
		top: 40px;
	}

	.hero-text-inner {
		top: 40px;
	}
}
@media (max-width: 991px) {
	.hero-text {
		position: relative !important;
		left: auto;
		top: auto;
		background: black;
		margin-top: -5px;
		padding: 30px 30px 60px 30px !important;
	}
	.hero-text-inner {
		position: relative !important;
		left: auto;
		top: auto;
		background: black;
		margin-top: -5px;
		padding: 0px 30px 50px 30px !important;
	}
}

.hero-text p {
	font-size: 56px;
	font-weight: 300;
	color: white;
	background: rgba(0,0,0,.62);
	display: inline;
	line-height: 1.6;
  	padding: 0 15px 5px 15px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
@media (max-width: 991px) {
	.hero-text p {
		font-size: 44px;
		background: transparent;
		line-height: 1.4;
	  	padding: 0;
	}
}

.hero-text-inner h2, .hero-text-inner h3 {
	font-weight: 300;
	color: white;
}

.hero-text-inner h2 {
	font-size: 77px;
	text-shadow: 0 4px 0 #000000;
	margin-bottom: 0;
}
@media (max-width: 991px) {
	.hero-text-inner h2 {
		font-size: 70px;
	}
}

.hero-text-inner h3 {
	margin-top: 0;
	font-size: 33px;
	text-shadow: 0 2px 0 #000000;
}
@media (max-width: 991px) {
	.hero-text-inner h3 {
		font-size: 30px;
	}
}


.hero-text .btn {
	background: rgba(255, 103, 0, .75);
	color: black;
	margin-top: 30px;
}
.hero-text .btn:hover {
	background: rgba(255, 103, 0, 1);
}

/******************************/
/******************************/
/* CALLOUT */
.callout-container {
	background: #d6d6d6;
	color: #808080;
	padding-bottom: 40px;
	text-align: center;
	margin-top: -5px;
}
@media (max-width: 991px) {
	.callout-container {
		text-align: left;
		padding: 0px 30px 60px 30px !important;
	}
}

.callout-container p {
	font-size: 50px;
	font-weight: 300;
	color: #808080;
	margin-bottom: 10px;
	margin-top: 40px;
}
@media (max-width: 991px) {
	.callout-container p {
		font-size: 44px;
	}
}

.callout-container .btn {
	color: #808080;
	box-shadow: 0 0 0 2px #808080;
	background: transparent;
}
.callout-container .btn:hover, .callout-container .btn:focus {
	color: #ffffff;
	box-shadow: 0 0 0 2px #808080;
	background: #808080;
}

/******************************/
/******************************/
/* RECENT */
.recent-container h2 {
	font-size: 45px;
	font-weight: 300;
	color: #808080;
}
@media (max-width: 991px) {
	.recent-container h2 {
		font-size: 40px;
	}
}

/******************************/
/******************************/
/* INNER CONTAINER 1 */
.inner-info-grey {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey:after {
	content: '';
	background: url(../images/shs.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey:after {
		display: none;
	}
}


.inner-info-grey h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}

/* ABC */
.inner-info-grey-abc {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-abc {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-abc:after {
	content: '';
	background: url(../images/abc-inner-side.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-abc:after {
		display: none;
	}
}


.inner-info-grey-abc h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-abc h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-abc p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-abc p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}
/* ABC */

/* grant */
.inner-info-grey-grant {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-grant {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-grant:after {
	content: '';
	background: url(../images/station-inner-rev-side.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-grant:after {
		display: none;
	}
}


.inner-info-grey-grant h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-grant h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-grant p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-grant p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}
/* grant */

/* sscy */
.inner-info-grey-ssyc {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-ssyc {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-ssyc:after {
	content: '';
	background: url(../images/ssyc-inner-side.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-ssyc:after {
		display: none;
	}
}


.inner-info-grey-ssyc h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-ssyc h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-ssyc p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-ssyc p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}
/* grant */

/* sussex */
.inner-info-grey-sussex {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-sussex {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-sussex:after {
	content: '';
	background: url(../images/41-sussex.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-sussex:after {
		display: none;
	}
}


.inner-info-grey-sussex h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-sussex h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-sussex p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-sussex p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}
/* sussex */

/* station east orange */
.inner-info-grey-east-orange {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-east-orange {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-east-orange:after {
	content: '';
	background: url(../images/station-east-orange-side.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-east-orange:after {
		display: none;
	}
}


.inner-info-grey-east-orange h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-east-orange h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-east-orange p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-east-orange p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}
/* station east orange */


/* 21st springfield */
.inner-info-grey-springfield {
	background: #d6d6d6;
	color: #808080;
	padding: 100px 0 80px 0;
	margin-top: -5px;
	text-align: center;
	position: relative;
}

@media (max-width: 991px) {
	.inner-info-grey-springfield {
		padding: 40px 0 20px 0;
	}
}

.inner-info-grey-springfield:after {
	content: '';
	background: url(../images/21-st-redv-side.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
}


@media (max-width: 991px) {
	.inner-info-grey-springfield:after {
		display: none;
	}
}


.inner-info-grey-springfield h2 {
	margin: 0 0 0 -10px;
	padding: 2px 10px;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	background: #ff6700;
	color: white;
	display: inline-block;
}
@media (max-width: 991px) {
	.inner-info-grey-springfield h2 {
		font-size: 28px;
		margin: 0;
	}
}

.inner-info-grey-springfield p {
	margin: 0 0 20px 0;
	font-size: 25px;
	font-weight: 300;
}

@media (max-width: 991px) {
	.inner-info-grey-springfield p {
		margin: 0 0 30px 0;
		font-size: 32px;
	}
}

/* 21st springfield */



/******************************/
/******************************/
/* INNER CONTAINER 2 */
.info-container {
	padding: 60px 0 40px 0;
}
@media (max-width: 991px) {
	.info-container {
		padding: 40px 0 0 0;
	}
}

/******************************/
/******************************/
/* PROMOS */
.promo {
	height: 225px;
    display: table;
    width: 100%;
    overflow: hidden;
}
@media (max-width: 1199px) {
	.promo {
		margin-bottom: 30px;
		height: 300px;
	}
}
.promo:hover .title span {
	box-shadow: 0 0 0 110px rgba(0,0,0, .75);
}

#shs-promo {
	background: url(../images/promos/shs-promo.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#abc-promo {
	background: url(../images/promos/abc-supply-thumb.jpg);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#sussex-promo {
	background: url(../images/promos/sussex-promo.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#second-promo {
	background: url(../images/promos/second-promo.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#station-promo {
	background: url(../images/promos/station-promo.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.promo .title {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 225px;
}

.promo .title span {
	transition: all .5s;
	background: rgba(0,0,0, .75);
	box-shadow: 0 0 0 10px rgba(0,0,0, .75);
	width: 100%;
	display: inline-block;
	color: white;
	font-size: 24px;
	padding: 15px 15px;
	font-weight: 300;
}


/******************************/
/******************************/
/* FOOTER */
/******************************/
/******************************/
footer {
	background: #ff6700;
	height: 175px;
	color: white;
	font-weight: 300;
	margin-top: 60px;
	overflow: hidden;
}
@media (max-width: 991px) {
	footer {
		height: auto;
	}
}

footer .container {
	position: relative;
}

footer .container:before {
	background: url(../images/footer-logo.png);
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
	content: '';
	width: 375px;
	height: 158px;
	position: absolute;
	right: 0;
	bottom: -60px;
}
@media (max-width: 991px) {
	footer .container:before {
		width: 300px;
		height: 126px;
		position: absolute;
		right: calc(50% - 150px);
		bottom: 0;
	}
}

footer ul {
	list-style: none;    
	display: block;
    padding: 0;
    margin: 55px 0 0 -15px;
}
@media (max-width: 991px) {
	footer ul {
		margin: 40px 30px 0 15px;
	}
}

footer ul li {
	display: inline-block;
	position: relative;
	margin-bottom: 0;
}
@media (max-width: 991px) {
	footer ul li {
		display: block;
		margin-bottom: 20px;
	}
}

footer ul li a {
	text-decoration: none;
	color: white;
	padding: 10px 15px;
	font-size: 18px;
	transition: .25s all;
}
@media (max-width: 991px) {
	footer ul li a {
		font-size: 22px;
	}
}

footer ul li a:hover {
	background: #ca6026;
}

footer p {
	margin-top: 15px;
	font-size: 18px;
	color: white;
}
@media (max-width: 991px) {
	footer p {
		font-size: 22px;
		padding: 0 30px 40px 30px;
	}
}