/*
	StyleSheet: Hullabaloo WordPress Setup 2015
	Description: Hullabaloo basic WordPress theme designed to use with Beaver Builder plugin to allow drag and drop editor.
	Created: 20th May 2015
	Author: Kane Mitchell
	Author URI: http://hullabaloo.co.uk
*/
/*
	### Basic Code For Media Queries ###

	@media only screen and (max-width: $sm-breakpoint) {
	     -> PHONES 
	}

	@media only screen and (max-width: $md-breakpoint) {
	    -> TABLETS AND DESKTOP
	}
	
	@media only screen and (min-width: $lg-breakpoint) {
	    -> LARGE DESKTOP
	}
*/
.clear {
  clear: both;
  float: none;
  height: 0;
  width: 0;
  display: block; }

html, body {
  background-color: #2b2b2b;
  font-family: "Open Sans", sans-serif;
  color: white;
  margin: 0;
  padding: 0; }

#masthead {
  background-color: #383838;
  padding: 20px 0; }

#main-logo {
  float: left;
  width: 200px;
  display: inline-block; }
  @media only screen and (max-width: 767px) {
    #main-logo {
      float: none;
      position: relative;
      margin: 15px auto;
      display: block;
      text-align: center;
      width: 150px;
      max-width: 80%; } }
  #main-logo img {
    width: 100%;
    height: auto;
    display: block; }

.page-content-container {
  position: relative;
  margin: auto; 
  max-width: 1210px;}

#site-navigation {
  float: right;
  margin-top: 15px; }
  @media only screen and (max-width: 767px) {
    #site-navigation {
      float: none;
      margin: auto; } }
  #site-navigation ul {
    padding: 0;
    margin: 0; }
    @media only screen and (max-width: 767px) {
      #site-navigation ul {
        text-align: center; } }
    #site-navigation ul li {
      list-style: none;
      float: left;
      margin-right: 10px; }
      @media only screen and (max-width: 767px) {
        #site-navigation ul li {
          float: none;
          display: inline-block; } }
      #site-navigation ul li a {
        padding: 5px 15px;
        color: #FFF;
        text-decoration: none;
        font-weight: 300;
        display: inline-block;
        cursor: pointer; }
        #site-navigation ul li a:hover {
          color: #fecb00; }

#main-site-footer {
  border-top: 1px solid black;
  padding: 30px 0; }

#powered-by {
  color: #fecb00;
  font-weight: 400;
  text-decoration: none; }

.page-content-container #primary, .page-content-container #secondary {
  margin-top: 20px;
  margin-bottom: 20px; }
.page-content-container #primary {
  float: left;
  width: 65%; }
  @media only screen and (max-width: 767px) {
    .page-content-container #primary {
      width: 92%;
      margin: 20px auto 0;
      float: none; } }
.page-content-container #secondary {
  float: left;
  width: 30%;
  margin-left: 5%; }
  .page-content-container #secondary ul {
    padding: 0;
    margin: 10px 0; }
    .page-content-container #secondary ul li {
      list-style: none; }
      .page-content-container #secondary ul li a {
        text-decoration: none;
        color: #fecb00; }
  .page-content-container #secondary aside {
    margin-bottom: 20px; }
    .page-content-container #secondary aside .widget-title {
      margin-top: 0; }
  @media only screen and (max-width: 767px) {
    .page-content-container #secondary {
      display: none; } }

#primary.post-list-holder {
  margin-bottom: 20px; }

article.post {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid white; }
  article.post .entry-title {
    color: white;
    margin-top: 0; }
    article.post .entry-title a {
      text-decoration: none;
      color: inherit; }
  article.post .entry-meta a {
    color: #fecb00;
    text-decoration: none; }
  article.post.single-post {
    border-bottom: none;
    padding-bottom: 0; }