/* BonFX Orange */
/* #e37a36 */
/* ==========================================================================
   Author's custom styles
   ========================================================================== */


@import url(//fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic);
@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700);

html, body {
	font-family: Merriweather, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Oswald, sans-serif;
	color: #e37a36;
}
h4 {
	line-height: 25px
}
a,a:hover,a:active,a:visited {
	color: #e37a36;
}
.navbar {
	background-image: url(../img/nav-bkgd.jpg);
}


/* 
--------------------------------------------- */
.jumbotron {
	background-image: url(../img/letters.jpg);
}
.jumbotron h1, .jumbotron .h1 {
	line-height: 56px;
	margin-bottom: 20px;
}
.jumbotron p.smaller {
	font-size: 12pt;
}
.logo-inline {
	margin-left: 3px;
	vertical-align: 3px;	
	width: 100%;
	max-width: 280px;
}
.book-icon {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	text-align: center;
	vertical-align: middle;
	margin: 0 auto;
	color: #fff;
	background-color: #e37a36;
	padding: 11px;
	font-size: 16pt;
}
.percentage-number {
	
}
.percentage-bar {
	height: 26px;
	background-color: #EBA272;
}
.percentage-bar-gradient {
	height: 26px;
	background: url(../img/gradient-white.png) no-repeat right;
	background-color: #EBA272;
}
.font-list {
	border-top: 1px solid #ccc;
	padding: 10px 0 2px 0;
	margin: 0 10px 0 0px;
}
.font-list-header {
	font-size: smaller;
	text-transform: uppercase;
	font-weight: bold;
	color: #999;
	margin: 0 10px 0 0px;
}
.font-name-number {
	white-space: nowrap;
	overflow: hidden;
}
#showMeMore {
	text-align: center;
	height: 50px;
	position: relative;
	top: -50px;
	background: url(../img/gradient-white-horizontal.png) repeat-x;
}
#showMeMore > span {
	position: relative;
	top: 50px;
	cursor: pointer;
}

/* email sign up
--------------------------------------------- */
.newsletter {
	background-image: url(../img/nav-bkgd.jpg);
	color: #fff;
}

.newsletter input {
	color: #000;
}

.newsletter .response {
	padding: 10px 20px 20px 20px;
}


/* First 5 fonts stacked bar chart
--------------------------------------------- */
.topFiveStackedBarSegments {
	width: 100%;
	margin: 90px 0 0 0;
}
.segment-1, .segment-2, .segment-3, .segment-4, .segment-5, .segment-6 {
	background-color: #e37a36;
	height: 26px;
	float: left;
}
.percentage {
	color: #444;
	padding: 3px 0 0 6px;
}
.name-1, .name-2, .name-3, .name-4, .name-5, .name-6 {
	/*height: 20px;*/
	float: left;
	/*text-align: center;*/
	font-weight: bold;
	font-size: smaller;
	text-transform: uppercase;
	color: #999;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    transform-origin: 0% 0%;
} 

.segment-1 {
	/*opacity: 1;*/
	background-color: #e37a36;
}
.segment-2 {
	/*opacity: .85;*/
	background-color: #E78E54;
}
.segment-3 {
	/*opacity: .70;*/
	background-color: #EBA272;
}
.segment-4 {
	/*opacity: .55;*/
	background-color: #F0B690;
}
.segment-5 {
	/*opacity: .40;*/
	background-color: #F4CAAE;
}
.segment-6 {
	/*opacity: .25;*/
	background-color: #F8DECD;
}


/* BonFX Slider
--------------------------------------------- */

.testimonialHolder {
	text-align: left;
	vertical-align: middle;
	float: left;
	position: relative;
	text-align: center;
}

.quote {
	font-size: 10pt;
	margin: 20px 20px 10px 20px;
	font-weight: bold;
	font-style: italic;
}

.author {
	font-size: 10pt;
	margin: 0 20px 20px 20px;
	font-style: italic;
	/*padding: 10px 0 0 0;*/
}

.sliderWrap {
	overflow: hidden;
	position: relative;
}

.bonfxSlider {
	margin: 10px 0;
	overflow: hidden;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	background: #eee;
	background-image: url(../img/letters.jpg);
}
.message-bkgd {
	margin: 10px 0;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	background: #eee;
	background-image: url(../img/letters.jpg);
	text-align: center;
	padding: 30px 0 10px 0;
}
.leaf {
	width: 40px;
	height: 20px;
	background-image: url(../img/leaf.png);
	margin: 0 auto 10px auto;
	opacity: .7;
}

/* BonFX button
---------------------------------------------------------------------------------------------------- */
.btn-bonfx { 
  color: #FFFFFF; 
  background-color: #E37A36; 
  border-color: #E37A36; 
} 
 
.btn-bonfx:hover, 
.btn-bonfx:focus, 
.btn-bonfx:active, 
.btn-bonfx.active,
.btn-bonfx.visited, 
.open .dropdown-toggle.btn-bonfx { 
  color: #FFFFFF; 
  background-color: #EBA272; 
  border-color: #E37A36; 
} 
 
.btn-bonfx:active, 
.btn-bonfx.active, 
.btn-bonfx.visited,
.open .dropdown-toggle.btn-bonfx { 
  background-image: none; 
} 
 
.btn-bonfx.disabled, 
.btn-bonfx[disabled], 
fieldset[disabled] .btn-bonfx, 
.btn-bonfx.disabled:hover, 
.btn-bonfx[disabled]:hover, 
fieldset[disabled] .btn-bonfx:hover, 
.btn-bonfx.disabled:focus, 
.btn-bonfx[disabled]:focus, 
fieldset[disabled] .btn-bonfx:focus, 
.btn-bonfx.disabled:active, 
.btn-bonfx[disabled]:active, 
fieldset[disabled] .btn-bonfx:active, 
.btn-bonfx.disabled.active, 
.btn-bonfx[disabled].active, 
fieldset[disabled] .btn-bonfx.active { 
  background-color: #E37A36; 
  border-color: #E37A36; 
} 
 
.btn-bonfx .badge { 
  color: #E37A36; 
  background-color: #FFFFFF; 
}






/* Helper classes
---------------------------------------------------------------------------------------------------- */
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 20px; }
.voffset5 { margin-top: 30px; }
.voffset6 { margin-top: 40px; }
.voffset7 { margin-top: 60px; }
.voffset8 { margin-top: 80px; }
.voffset9 { margin-top: 100px; }
.voffset10 { margin-top: 150px; }




/* Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 960px) {

	.font-list-header {
		display: none;
	}
	.percentage-number {
		margin-bottom: 10px;
	
	}
	.percentage-bar {
		margin-bottom: 10px;
	}

	h1, .h1 {
		font-size: 32px;
	}

}