/* Put your CSS here */

*{box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/*** CLEARFIX ***/
	.clearfix:before,
	.clearfix:after{content: ""; display: table;}
	.clearfix:after{clear: both;}
	.clearfix{zoom: 1;}

BODY {
	background-color: #121212;
	margin-top: 50px;
/*
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 400;
*/
	
}

H1, H2, H3, H4, H5, H6 {
	text-transform: uppercase;
	font-family: "Roboto Condensed", sans-serif;
}

.navbar-brand {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.5em;
}

UL.nav.navbar-nav LI A {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
}

DIV.jumbotron {
	background-image: url("../images/hero-background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}

#intro {
	color: #fff;
	background-color: rgba(0,0,0,0.65);
	margin-top: 20px;
	padding: 20px;
	margin-bottom: 20px;
}
#intro P {font-size: 1.2em;}
#intro A.btn {font-family: "Roboto Condensed"; background-color: rgba(0,0,0,0.75); color: #fff;}

.sub-navigation {min-height: 45px;}
.sub-navigation DIV.row {margin: 10px 0 10px 0;}

@media (min-width: 768px){

  DIV.jumbotron {min-height: 700px;}

}

@media (max-width: 540px){

  DIV.jumbotron {background-size: contain; background-color: #121212; border-bottom: solid 1px #666;}
  #intro {top: 175px; margin-bottom: 175px; }

}

/* --------- ROLES ------------ */


DIV.role-header {height: 400px;}
DIV.role-header.operator {
	background-image: url("../images/hero-operator.jpg");
	background-size: cover;
	background-position: 50% 30%;
	background-repeat: no-repeat;
}
DIV.role-header.planner {
	background-image: url("../images/hero-planner.jpg");
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;
}
DIV.role-header.production {
	background-image: url("../images/hero-production.jpg");
	background-size: cover;
	background-position: 50% 40%;
	background-repeat: no-repeat;
}
DIV.role-header.analyst {
	background-image: url("../images/hero-analyst.jpg");
	background-size: cover;
	background-position: 50% 40%;
	background-repeat: no-repeat;
}

DIV.role-header H2 {
	color: #fff;
	background-color: rgba(0,0,0,0.65);
	margin-top: 20px;
	padding: 20px;
	margin-bottom: 20px;
}

DIV.role-description {min-height: 300px;}


/* --------- UPDATES ------------ */

#updates-list .list-group-item {background: #333; color: #ccc;}
#updates-list .list-group-item:hover {background: #666;}
#updates-list .list-group-item a {color: #ccc;}
#updates-list .list-group-item a:hover {color: #fff;}

#updates-list SPAN.char-overlay,
#updates-single SPAN.char-overlay {
  font-family: 'Helvetica';
  font-weight: bold;
  margin-top: 5px;
}

#updates-list DIV.month {font-weight: bold; font-size: 16px; text-transform: uppercase; margin-top: 5px;}
#updates-list DIV.year {font-weight: normal; font-size: 14px;}
#updates-list DIV.post-type { margin-top: 15px;}
#updates-list LI.see-more {padding: 20px; margin-top: 30px; list-style-type: none;}

#update-single {padding-top: 40px; color: #999;}
#update-single #updates-list DIV.row {margin-top: 20px;}
#update-single #updates-list > A {color: #666;}
#update-single #updates-list > A:hover {color: #ccc;}


/* --------- APPLY ------------ */

#apply {padding-top: 40px;}