/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 

.red {
	color: #980329;
}

/* this style positions the
 * element behind the page header rather than below it on the
 * page. Mix it into the <div ...> class for the target.
 */
.position-under-header {
	padding-top: 110px;
    margin-top: -110px;
}

.fl-page-footer,
.red-background {
	background-color: #980329;
}

.clear-white-button a,
.clear {
	background-color: transparent !important;
}

.clear-white-button a:hover {
	background-color: black !important;
}

.clear-white-button a,
.white {
	border: 2px solid white !important;
	border-radius: 8px;
	color: #ffffff !important ;
}

.black-border-button a,
.black {
	border: 2px solid black !important;
	border-radius: 8px;
	color: #000000 !important ;
}

.VideoCaption {
	color: white;
	font-size: 14pt;
}

.fl-logo-text {
	text-transform: uppercase;
	color: white;
	font-size: 14pt !important;
	font-family: "Ek Mukta", Verdana, Helvetica, sans-serif;
	font-weight: 600;
	text-align: center !important;
	padding: 3px 20px 3px 20px !important;
	margin: 4px 4px 4px 4px !important;
	letter-spacing: 3px;
	border-radius: 6px;
	background-color: #980329;
}

.hr {
	border-bottom: 1px solid lightgray;;
}

.front-page-content-no-background-section {
	color: black;
	font-size: 16pt;
	text-align: left;
}

.front-page-content {
	color: white;
	font-size: 20pt;
	text-align: center;
}
.front-page-content p {
	margin-top: 1em;
}

.fl-page-header-wrap {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* restyle the footer, the red background is done, above
 */

.fl-page-footer {
	color: white;
	letter-spacing: 2px;
	font-size: 9pt;
	font-family: "Ek Mukta", Verdana, sans-serif;
	font-weight: 100;
	font-style: italic;
}
.fl-page-footer a 		  { color: white; }
.fl-page-footer a:visited { color: white; }
.fl-page-footer a:active  { color: white; }
.fl-page-footer a:hover   { color: white; }

/* Spread the main title bar out so that there's more room for the menu */

.fl-page-header-container.container {
   padding-left: 20px;
   padding-right: 20px;
   width: 100%;
}

.speaking-at {
	text-align: center;
	font-size: 16pt;
}

/*----------------------------------------------------------------------*/
/* Styles for the menu bar.
/*----------------------------------------------------------------------*/

/* Move the page up to slide under the nav bar */
@media (min-width: 768px) {
	.home .fl-page-content { margin-top: 0px;   }
}
@media (min-width: 992px) {	.home .fl-page-content { margin-top: -150px; } }
@media (min-width: 1200px){ .home .fl-page-content { margin-top: -150px; } }

@media (max-width: 768) {
	.home .fl-page-header-primary {
		background: rgba(10,10,10,.8) !important;
	}
}

/* Code to make the header background appear when the window is
 * scrolled. In addition to the nav-background style, you need
 * to add the following javascript (using the customizer's
 * "Code->JavaScript Code" item. Note that BB, for some reason,
 * requires you to use "jQuery" instead of "$". I've inserted
 * this script using BeaverBuilder's Customizer->Code->JavaScript_Code
 * feature
 *
// See: http://jsfiddle.net/46s3o8Lm/1/
// modify heder when page scrolled

jQuery(window).scroll(function () {
	if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(window).height() + 500) {
		jQuery(".fl-page-header-primary").addClass("nav-background");
	} else {
		jQuery(".fl-page-header-primary").removeClass("nav-background");
	}
});
*/

.fl-page-header-wrap {
	padding-bottom: 3px;
	padding-top: 3px;
}

.nav-background {
  background: rgba(10,10,10,.8) !important;
}

.home .fl-page-header-primary {
	position: fixed;
	z-index: 3;
	background: none;
}

.navbar-nav a {
	font-family: "Ek Mukta", Verdana, Arial, sans-serif !important;
	font-weight: 300 !IMPORTANT;
	color: white !important;
}

/* Fixes a bug in firefox */
*{
min-height: 0;
min-width: 0;
}

/* Banner on main page */

.large-banner {
	color: #ff8d85;
	font-size: 72pt;
	line-height: 72pt;
}

/*----------------------------------------------------------------------*/

/* Example:
 * <ul class="outline">
 * <li class="l0">
 * <li class="l1">
 * etc.
*/
ul.outline {
	list-style-type: none;
}

ul.outline li.l0 {
	margin-top: .5em;
	margin-left: 1em;
}
ul.outline li.l1 {
	margin-left: 3em;
}
ul.outline li.l2 {
	margin-left: 5em;
}
ul.outline li.l3 {
	margin-left: 7em;
}
ul.outline li.l4 {
	margin-left: 9em;
}

/*
A pull quote. Put it at the top of the paragraph (above the paragraph text). It floats right and is pushed down a couple lines, with
text flowing around it.
    <p>
    <div class="pull-quote"><div>
            pull quote text.
    </div></div>
    paragraph text

Note that you need to nest a second div within the outer one. That inner div may not have
sibling divs, but it can contain other divs if you like.

In the following implementation, the :before in the outer div effectively injects a block at the top of
the div. The block floats, and clears right, so subsequent floats will
go below, rather than next to, it. The height of this "strut" is the
amount the pull quote is pushed down. 
*/
.pull-quote {
}
.pull-quote:before {
  content: "" ;
  display:block;
  float: right;
  height: 3em;
  width: 0px;
  clear: right;
}
.pull-quote > div {
    font-size: 20pt;
    font-weight: bold;
    color: white;
    clear: right;
    width: 40%;
    background-color:#830020;
    border-radius:4px;
    padding: .75em 1em .75em 1.25em;
    margin: .25em 0em .25em 0em;
    position: relative;
    right: -1em;
    float: right;
}
@media screen and (max-width: 620px) {
	.pull-quote > div {
	    font-size: 16pt;
	    right: 0em;
	}
}
@media screen and (max-width: 500px) {
	.pull-quote > div {
	    font-size: 12pt;
	}
}