span.blog-title { 
   position: absolute; 
   margin: auto;
   left: 0; 
   padding:5%;
   width: 100%; 
   color: #FFF; 
   font-weight: bold;
   font-size: 2.5em;  
   z-index:1;
   width: 100%;
   background: rgb(0, 0, 0); /* fallback color for IE < 9*/
   background: rgba(0, 0, 0, 0.5);
   
}

.title {
    color:#FFF;
  text-transform: uppercase; 
  padding: 1%;
  background-color: #7FD7FE;
  margin-top: 0px;
  border: none;
  border: 1px solid rgba(0, 0, 0, 0.1);;
  border-radius: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.blog-image {
  position:relative;
}

.blog-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/*.blog-container:after {
    content: ' ';
    display: block;
    position: absolute;
    background-color: #f7fee6;
    background-color: #000;
    left: 0;
    top: 0;
}
*/
.blog-container {
  margin: auto;
  max-height:100%;
  padding: 1%;
  overflow: auto;
  word-wrap: break-word;/* Mainly for small screens - word will be wrapped broken and wrapped */
  word-break: keep-all; /*Will wrap on hyphens*/
  position:relative;
  background-color:#FFF;
  margin-left: 0;
}

.read-more {
  display:block;
  color:#828686;
  text-decoration: underline;
}

.read-more:hover {
  padding-left :2px;
  padding-right :2px;
  background-color: #7FD7FE;
  width:12%;
}

.blog-desc, .blog-footer {
  border: 1px solid #EEE;
  padding:2%;
  margin-bottom: 5px;
}


#blog-post-main { margin-bottom:3%; } /*Append a margin between the blog post and the related content containers*/

.blog-header-cal {
  background:url("../images/calendar-50x50.png");
  position:absolute;
}


.blog-header h3, .blog-header img {
  display:inline-block; /* make content appear on the same line as eachother */
  vertical-align: middle; /* make content center vertically */
  text-align: center;
}

.blog-header  {
  text-align: center;
  
}

.blog-header h3 {padding-left:10px;} /* add padding before date on blog date*/

.blog-header img {
  max-width: 100%;
  max-height: 100%;
}

.blog-body  blog-footer {
 padding:1%;
}

.blog-post-footer {
  width:100%;
} 

/*.blog-body h1{
  margin-bottom: 50px;
}*/

h1 a {
  color:#FFF!important;
  width:100%;
  display:inline-block;
}

.author-pic {
  max-height:150px;
  max-width:150px;
  margin:auto;
}

.side-bar-related:before {
    content: ' ';
    display: block;
    position: absolute;
    background-color: #f7fee6;
    background-color: #000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.2;
    -webkit-filter: blur(100px);     
    filter: blur(100px);
}

.side-bar-related {
  position: relative;
  top: 0;
  right:0;
  background-color: #FFF;
  margin:auto;
  height: 97%;
  width:100%;
}

/*Add border shading to content areas*/
.blog-container, .side-bar-related {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 15px 0 rgba(0, 0, 0, 0.05);
}

a {
  text-decoration: none;
  color:#0099cc;
  cursor: pointer;
}


/*.blog-container:before {
  background-image: url("../images/calendar-50x50.png");
  size:30px;
}*/


.rounded {
  border-radius: 5%;
}

/* CSS tag effect */

.tags {
    overflow:hidden;
    list-style:none;
    padding:0px;
    margin:5px;
}

.tags li {
    float:left;
    padding:0;
    margin:0 0 5px 20px; /* make some space for the triangle */
    /*font:12px/20px Arial, sans-serif;*/
}

.tags a {
    position:relative;
    display:block;
    padding:0px;
    text-decoration:none;
    color:#fff;
    background:#594b3b;
    border:1px dashed #FFF;
}

.tags-alt a span{
    position:relative;
    display:block;
    padding:0 8px;
    text-decoration:none;
    color:#fff;
}

/* CSS triangle */

.tags a:before {
    content:""; /* generate the pseudo-element */
    position:absolute;
    left:-10px;
    border-width:10px 10px 10px 0;
    border-style:solid;
    border-color:transparent #594b3b;
}

/* CSS circle hole */

.tags a:after {
    content:""; /* generate the pseudo-element */
    position:absolute;
    left:-2px;
    top:8px;
    width:3px;
    height:3px;
    background:#fff;
    -moz-border-radius:5px;
    border-radius:5px;
}

.tags a:hover,
.tags a:focus,
.tags a:active {
    background:#555;
}

.tags a:hover:before,
.tags a:focus:before,
.tags a:active:before {
    border-right-color:#555;
}

/* Larger version with a few more CSS3 enhancements */

.tags-alt li {
    margin:0 0 5px 25px;
    font-size:18px;
    line-height:30px;
}

.tags-alt a {
    padding:0 12px;
    -moz-border-radius:0 3px 3px 0;
    border-radius:0 3px 3px 0;
    -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.25);
    -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.25);
    box-shadow:1px 1px 1px rgba(0,0,0,0.25);
}

.tags-alt a:before {
    left:-15px;
    border-width:15px 15px 15px 0;
    border-style:solid;
    border-color:transparent #594b3b;
}

.tags-alt a:after {
    top:12px;
    width:5px;
    height:5px;
    -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.25);
    -moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.25);
    box-shadow:inset 1px 1px 0 rgba(0,0,0,0.25);
}

/*Add border shading to content areas*/
.tags a:hover, .tags-alt a:hover  {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 6px 15px 0 rgba(0, 0, 0, 0.05);
}

/* Remove shadow from links within the tags so it doesnt appear as a border around the font */


/* Override default 1 second transition on a within style.css */
.tags a:hover, .tags-alt a:hover{
  transition: all 0s;
  -moz-transition: all 0s; /* Firefox 4 */
  -webkit-transition: all 0s; /* Safari and Chrome */
  -o-transition: all 0s; /* Opera */
}


/*#blog-related { margin-left: 0}*/
#blog-list {
  margin-top: 4px;
}

.blog-container { margin-left: 0!important}

.share-bar {

}

.fb-frame {
  margin-top: 10px!important;
}

.fb-comments, .fb-comments iframe[style], .fb_iframe_widget > span[style] {
  width: 100% !important;
}

.video {
  max-width: 100%;
  text-align: center;
  background-color: #000;
}

.video:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Responsive Design elements */

@media only screen and (max-width: 480px) {
  .side-bar-related {position: relative;}

  span.blog-title {font-size: 1em;}

  .read-more:hover {
    padding-left :2px;
    padding-right :2px;
    background-color: #7FD7FE;
    width:35%;
  }

  .share-bar {
    position: fixed;
    z-index: 5;
    width:100%;
    bottom:0;
    left: 0;
    background: linear-gradient(to left, rgba(0,0,0, 0.9), rgba(0,0,0, 0.6) );
    padding:10px;
  }
}

/* Blog Styles */

.blockquote {
  display:block;
  background: #fff;
  padding: 15px 20px 15px 20px;
  margin: 0 0 20px;
  position: relative;
  /*Font*/
  font-size: 1.3em;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  /*Borders*/
  border-left: 10px solid;
  border-right: 5px solid;
  /*border-top: 2px solid;
  border-bottom: 2px solid;*/
  -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;

}

.blockquote::before {
  content: "\201C"; /*Unicode for Left Double Quote*/
  /*Font*/
  font-family: Georgia, serif;
  font-size: 2em;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

.blockquote::after {
  content: "\201D";
  position: absolute;
  right: 5px;
  bottom:0px;


  /*Font*/
  font-family: Georgia, serif;
  font-size: 2em;
  font-weight: bold;
  color: #999;
}


.code {
    padding: 0.5em 1em;
    border: 1px solid #bebab0;
    background-color: #f9f9f9;
}