/*
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... */

/* Make the header transparent */
body .fl-page-header-primary{
    background:transparent;
    position:relative;
    z-index: 10;
}

/* FOR GREATER THAN THE MEDIUM DEVICE BREAKPOINT */
@media screen and (min-width: 993px) {
	/* ROW STYLING */
	.top-banner .fl-row-content-wrap{
	    margin-top: -149px;
	    padding-top: 100px;
	    padding-bottom: 80px;
	}
}

/* Remove Bottom Border on Top Bar... */
.fl-page-bar {
    border-bottom: 0px solid #FFFFFF;
}

/* Remove Bottom Border on Header... */
.fl-page-nav-right .fl-page-header-wrap {
    border-bottom: 0px solid rgba(255,255,255,0.13);
}

header .fl-page-header-wrap { border-bottom: 0; }


/* Remove header nav separator lines... */
.fl-page-nav .navbar-nav > li > a {
    border-right: none !important;
    margin: 10px 0;
    padding: 5px 8px;
}

/* Masonry Blog Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

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

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

/* ------------------------
Archive TOP SECTION DESIGN STYLING
------------------------ */
/* Add the black gradient fade overlay */
.gradient-fade{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(15%, transparent), color-stop(100%, rgba(0,0,0,0.85))); background: -webkit-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -o-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -ms-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: linear-gradient(to bottom, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 );}
/* Style the content in our new Post Header section */
.bb-top-archive-header{position:relative;padding:1% 0 10%;color:#fff;margin-top: -149px;}
.bb-top-archive-header a:link, .bb-top-archive-header a:visited{color:#fff;}
.bb-top-archive-header .fl-post-title{color:#fff;margin-bottom:0;}
.bb-top-archive-header .fl-post-meta { position: relative; margin-top: 35px; }
.bb-top-archive-header .fl-post-meta > span { display: block; float: left; width: 100%; padding-left: 100px; }
.bb-top-archive-header .fl-post-meta .fl-sep{display:none;}
.bb-top-archive-header .fl-post-author { font-size: 1.5em; }
.bb-top-archive-header img {position: absolute; top: -5px; left: 0;}

/* ------------------------
SINGLE POST TOP SECTION DESIGN STYLING
------------------------ */
/* Add the black gradient fade overlay */
.gradient-fade{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(15%, transparent), color-stop(100%, rgba(0,0,0,0.85))); background: -webkit-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -o-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: -ms-linear-gradient(top, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); background: linear-gradient(to bottom, transparent 0%, transparent 15%, rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 );}
/* Style the content in our new Post Header section */
.bb-top-post-header{position:relative;padding:17% 0 10%;color:#fff;margin-top: -149px;}
.bb-top-post-header a:link, .bb-top-post-header a:visited{color:#fff;}
.bb-top-post-header .fl-post-title{color:#fff;margin-bottom:0;}
.bb-top-post-header .fl-post-meta { position: relative; margin-top: 35px; }
.bb-top-post-header .fl-post-meta > span { display: block; float: left; width: 100%; padding-left: 100px; }
.bb-top-post-header .fl-post-meta .fl-sep{display:none;}
.bb-top-post-header .fl-post-author { font-size: 1.5em; }
.bb-top-post-header img {position: absolute; top: -5px; left: 0;}

/** ------ Default Button Styling ------ **/

/** Default State styling **/
button,
input[type=button],
input[type=submit] {
    background: transparent; /* Background color for button */
    color: #5cb3c1; /* text color */
    font-size: 16px;
    line-height: 20px;
    padding: 6px 12px;
    font-weight: normal;
    text-shadow: none;
    border: 2px solid #5cb3c1;  /* broder weight, style and color */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/** Hover state styling **/
button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    background: #666666;
    color: #ffffff;
    border: 2px solid #666666;
    text-decoration: none;
}

/** Adding some transition **/
button,
input[type=button],
input[type=submit],
button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    transition: all ease-in 0.2s;
}

.fl-cta-title { color: #5cb3c1 !important; }

/** Customising the Archive title **/
.fl-page .fl-archive .fl-archive-title h1 {
    border-bottom: 1px solid #e6e6e6;
    font-size: 42px !important;
    color: #5cb3c1 !important;
    margin-bottom: 40px;
    padding-bottom: 8px;
}