/****************************************
	GENERIC STYLES
*****************************************/

body{
	font-family: 'Karla', sans-serif;
	font-weight:400;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Karla', sans-serif;
}

/****************************************
	FRAGMENT (JR FRAMEWORK SAMPLE)
*****************************************/

.fragment{
	min-height:100px;
	padding:100px 0;
	position:relative;
}
.fragment.hero{
	font-family: 'GFS Didot', serif;
	min-height:500px;
	padding:0;
}
.fragment.minor{
	min-height:60px;
	padding:60px 0;
}
.fragment .ghost{
	display:none;
}
.fragment h1{
	color:#FFF;
	font-size:18px;
	text-align:center;
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:4px;
	margin:0 0 30px 0;
}
.fragment ul{
	margin:0;
}
.fragment .cta:hover{
	text-decoration:none;
	background:#589573;
}
.fragment .cta{
	color:#FFF;
	background:#7BB896;
	text-align:center;
	text-transform:uppercase;
	line-height:35px;
	letter-spacing:2px;
	border-radius:4px;
	padding:0 20px;
	margin:0 0 20px 0;
	display:inline-block;
}
.fragment .cta.large{
	width:200px;
	line-height:50px;
	display:block;
	padding:0 30px;
	margin:0 auto;
}
.fragment .blurb{
	color:#FFF;
	width:620px;
	line-height:1.5em;
	text-align:center;
	display:block;
	margin:0 auto;
	padding:0 0 30px 0;
	opacity:0.5;
}
.block{
	background:#F0F0F0;
	text-align:center;
	border-top:2px solid #DDD;
	display:block;
}
.block:nth-child(2n+1){
	background:#E7E3E4;
}
.block h1{
	color:#237491;
	font-size:18px;
	font-weight:normal;
}
.block p{
	color:#444;
	font-size:16px;
}
.block.column h1{
	text-align:left;
}
.block.column p{
	text-align:left;
}
.block.column img{
	width:140px;
	height:140px;
	background:#DDD;
	border-radius:1000px;
	display:block;
	margin:0 0 20px 0;
}
.block ul{
	padding:20px 0 0 20px;
	text-align:left;
}
.block ul li{
	color:#38606A;
	font-size:16px;
	margin:0 0 10px 0;
}
.disc{
	color:#FFF;
	width:30px;
	height:30px;
	line-height:30px;
	background:#7BB896;
	border-radius:1000px;
	margin:0 0 0 -15px;
	text-align:center;
	display:block;
	position:absolute;
	top:auto; left:50%; bottom:-15px;
	z-index:1000;
}

/****************************************
	HEADER
*****************************************/
#header{
	background: #0F3741; /*temporary change */

	padding:80px 0;
}
#header #brand{
	width:0px;
	height:150px;
	display:block;
	background:url('../img/penum-logo.png') center no-repeat;
	position:absolute;
	padding:0 0 0 150px;
	margin:0 0 0 -76px;
	top:10px; left:50%;
	overflow:hidden;
}
#header ul{
	display:block;
	text-align:center;
	margin:0; padding:0;
}
#header ul li{
	font-size:15px;
	letter-spacing:4px;
	text-transform:uppercase;
	margin:0 20px;
	display:inline-block;
}
#header ul .breaker-breaker-come-in-one-two{
	margin-right:230px;
}
#header ul li a:focus,
#header ul li a:hover{
	text-decoration:none;
	border-bottom:2px solid #AAA;
	outline:none;
}
#header ul li a{
	color:#FFF;
	padding:10px 0;
	text-align:center;
}
#header .cta:hover{
	color:#B4CDD4;
	background:#3B545B;
	border:0;
}
#header .cta{
	color:#6F888F;
	line-height:20px;
	letter-spacing:1px;
	background:#0A232A;
	padding:5px 14px;
	position:absolute;
	top:20px; right:20px;
}
#menuTrigger:active{
	top:31px;
}
#menuTrigger:hover{
	cursor:pointer;
}
#menuTrigger{
	color:#FFF;
	font-size:32px;
	position:absolute;
	top:30px; right:40px;
	z-index:9999;
}
/****************************************
	HERO
*****************************************/
#hero{
	background:#0F3741;
}
#hero #uno{
	height:500px;
	display:block;
}
#hero #uno .item{
	height:500px;
	background-size:auto 100% !important; /* had no other choice :( */
}
#hero #uno #uno-one{
	background:url('../img/banner-1.jpg') center no-repeat;
}
#hero #uno #uno-two{
	background:url('../img/banner-2.jpg') center no-repeat;
}
#hero #uno #uno-three{
	background:url('../img/banner-3.jpg') center no-repeat;
}
#hero .carousel-indicators li{
	width:15px;
	height:15px;
	border:3px solid #FFF;
}
#hero .carousel-indicators .active{
	position:relative;
	top:-1px;
}
#hero span{
	color:#FFF;
	font-size:44px;
	text-transform:uppercase;
	text-align:center;
	letter-spacing:6px;
	display:block;
	margin:0 auto;
	padding:170px 0 0;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
}
/****************************************
	FEATURES
*****************************************/
#features{
	background:#F0F0F0;
	padding:40px 0;
}
#features .col-sm-4:hover{
	background:#F6F6F6;
	cursor:pointer;
}
#features .col-sm-4:hover span{
	color:#0A232A;
}
#features .col-sm-4{
	padding:20px;
}
#features .col-sm-4.imActive{
	background:#FFF;
	border-radius:4px;
}
#features .col-sm-4.imActive span{
	color:#589573;
}
#features .col-sm-4{
	background:#E6E6E6;
	border-radius:4px;
}
#features h1{
	color:#237492;
}
#features p{
	color:#666;
	text-align:center;
	font-size:16px;
}
#features span{
	color:#AAA;
	text-align:center;
	display:block;
	padding:20px 0 0 0;
}
/****************************************
	BUDGET
*****************************************/
#budget{
	background:url('../img/panel-1.jpg') center no-repeat;
	background-size:auto 100% !important; /* had no other choice :( */
	padding:101px 0;
}
#budget p{
	opacity:1;
}
/****************************************
	CREW
*****************************************/
#crew{
	background:url('../img/panel-2.jpg') center no-repeat;
	background-size:auto 100% !important; /* had no other choice :( */
	padding:101px 0;
}
#crew p{
	opacity:1;
}
/****************************************
	GUEST
*****************************************/
#guest{
	background:url('../img/panel-3.jpg') center no-repeat;
	background-size:auto 100% !important; /* had no other choice :( */
	padding:101px 0;
}
#guest p{
	opacity:1;
}
/****************************************
	ARTICLES
*****************************************/
#articles{
	background:#E7E3E4;
}
#articles h1{
	color:#0F3741;
}
#articles article img{
	width:120px;
	height:120px;
	background:#EEE;
	border-radius:1000px;
	margin:0 auto;
	display:block;
}
#articles article h1{
	color:#237492;
	padding:20px 0 0 0;
}
#articles article p{
	color:#0F3741;
	font-size:16px;
	text-align:center;
	line-height:1.5em;
}
#articles article a{
	color:#7BB896;
	letter-spacing:1px;
	text-transform:uppercase;
	text-align:center;
	display:block;
}
/****************************************
	LEARN
*****************************************/
#learn{
	background:#0F3741;
}
#learn ul{
	text-align:center;
	display:block;
	padding:0;
}
#learn ul li{
	display:inline-block;
	margin:0 15px;
}

/****************************************
	MORE
*****************************************/
#more{
	background:#071c21;
}
/****************************************
	CONTENT
*****************************************/
#content header{
	padding:0 0 50px 0;
}
#content header h2{
	color:#444;
	font-size:16px;
	text-align:center;
	font-weight:normal;
	line-height:1.5em;
	padding:40px 0 0 0;
}
/****************************************
	INTRO
*****************************************/
#intro.fragment{
	color:#FFF;
	height:300px;
	font-size:32px;
	font-family: 'GFS Didot', serif;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:4px;
	background:#0F3741 url('../img/panel-2.jpg') center no-repeat;
	background-size:auto 100% !important; /* had no other choice :( */
	line-height:100px;
	margin:0;
}
/****************************************
	SORT
*****************************************/
#sort{
	padding:50px 0;
}
#sort ul{
	text-align:center;
}
#sort ul li{
	color:#666;
	background:#F0F0F0;
	display:inline-block;
	border-radius:4px;
	padding:5px 10px;
	margin:0 5px;
}
#sort ul li.active{
	color:#333;
	background:#E0E0E0;
}
#sort ul li:hover{
	color:#444;
	background:#E0E0E0;
	cursor:pointer;
}
#sort ul li.title:hover,
#sort ul li.title{
	background:transparent;
	cursor:default;
}
/****************************************
	BLOG
*****************************************/
#blog h1{
	text-align:left;
}
#blog p{
	text-align:left;
}
#blog .meta{
	font-size:16px;
	text-align:left;
}
#blog .meta span{
	display:inline-block;
}
#blog ul{
	display:inline-block;
	padding:0;
}
#blog li{
	display:inline-block;
	margin:0 0 0 10px;
}
#blog li a{
	color:#7BB896;
}
#blog img{
	width:120px;
	height:120px;
	display:block;
	background:#AAA;
	border-radius:1000px;
	margin:0 40px 80px 0;
	float:left;
}
#blog .cta{
	margin:20px 0 0 0;
	float:left;
}
/****************************************
	FOOTER
*****************************************/
#footer{
	background:#0A232A;
	border-top:15px solid #071C21;
}
#footer ul{
	text-align:center;
	display:block;
	padding:0;
	margin:0;
}
#footer ul li{
	color:#0F3741;
	display:inline-block;
	margin:0 10px;
}
#footer ul li a{
	color:#244C56;
	line-height:25px;
	padding:0 5px;
}



@media all and (max-width: 970px){

	#header ul .breaker-breaker-come-in-one-two{
		margin:0 150px 0 0;
	}

	#header ul li{
		margin:0 15px;
	}

}

@media all and (max-width: 870px){

	#header ul .breaker-breaker-come-in-one-two{
		margin:0 150px 0 0;
	}
	#header ul li{
		letter-spacing:2px;
	}

}

@media all and (max-width: 768px){

	.fragment .blurb{
		width:80%;
	}
	#intro.fragment{
		line-height:1.2em;
		padding:100px 0;
	}
	#sort ul li.title:hover, #sort ul{
		padding:0;
	}
	#sort ul li.title{
		display:block;
		text-align:center;
		padding:0;
		margin:0 0 10px 0;
	}
	.block.column h1,
	#blog h1,
	#blog p{
		text-align:center;
	}
	#blog .cta{
		line-height:40px;
		display:block;
		margin:20px 0 0 0;
		float:none;
	}
	#blog .meta{
		margin:20px 0 30px 0;
	}
	#blog .meta span{
		display:block;
		text-align:center;
	}
	#blog .block ul{
		display:block;
		text-align:center;
	}
	#blog .block ul li a{
		font-size:14px;
	}
	#content header h2{
		padding-top:50px;
	}
	#header{
		padding:50px 0;
	}
	#header ul{
		background:#0A232A;
		position:absolute;
		top:100px; left:0; right:0;
		z-index:9000;
		display:none;
	}
	#header ul .breaker-breaker-come-in-one-two{
		margin:0;
	}
	#header ul li{
		font-size:16px;
		text-align:center;
		line-height:50px;
		display:block;
		border-bottom:2px solid #172E35;
		margin:0;
	}
	#header ul li:hover{
		border-color:#173037;
	}
	#header ul li a{
		padding:0;
		display:block;
	}
	#header ul li .cta{
		color:#FFF;
		background:#051E25;
		line-height:inherit;
		display:block;
		position:relative;
		top:auto; left:auto; right:auto;
		border-radius:0;
	}
	#header ul li a:active,
	#header ul li a:hover{
		line-height:inherit;
		display:block;
		background:#173037;
		border:0;
	}
	#articles article{
		padding:0 0 50px 0;
	}
}