/******************************************************************
Site Name: 
Author: 

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the seperate functions for each media query. The base mobile 
stylesheet is called in the header, so here we're working up from 
there. To edit the css, just find the corresponding LESS file.
******************************************************************/
/*
Base.css contains the main mobile styles and is called in the 
header. This way mobile devices get ONLY the styles that apply
to them. No muss, no fuss.

normalize.css and the mixins are also called within that base file 
*/
/******************************************************************
AVERAGE VIEWING SIZE 
This is the average viewing window. So Desktops, Laptops, and 
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/

@media only screen and (min-width: 481px) {
  /* styles in 481up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: 481px and Up Stylesheet
  
  This stylesheet is loaded for larger devices. It's set to 
  481px because at 480px it would load on a landscaped iPhone.
  This isn't ideal because then you would be loading all those
  extra styles on that same mobile connection. 
  
  A word of warning. This size COULD be a larger mobile device,
  so you still want to keep it pretty light and simply expand
  upon your base.less styles.
  
  ******************************************************************/
  /*********************
  GENERAL STYLES
  *********************/
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /*********************
  HEADER SYTLES
  *********************/
  .header .icons {
    display: block;
    position: absolute;
    right: 0; }
    .header .icons ul {
      float: left;
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      opacity: 0.75; }
      .header .icons ul li {
        float: left;
        margin: 3px 7px 0 0;
        display: inline; }
        .header .icons ul li a {
          float: left;
          width: 24px;
          height: 24px;
          text-indent: -9999px;
          outline: none;
          opacity: 0.75; }
        .header .icons ul li a:hover {
          opacity: 1; }
    .header .icons ul:hover {
      opacity: 1; }
    .header .icons .facebook a {
      background: url(../images/social/24px/facebook.png) no-repeat; }
    .header .icons .youtube a {
      background: url(../images/social/24px/youtube.png) no-repeat; }
    .header .icons .podcast a {
      background: url(../images/social/24px/podcast.png) no-repeat; }
    .header .icons .rss a {
      background: url(../images/social/24px/rss.png) no-repeat; }

  /*********************
  NAVIGATION STYLES
  *********************/
  /*
  you can use hover styles here even though this size
  has the possibility of bieng a mobile device.
  */
  /* highlight current page */
  /*
  plan your menus and drop-downs wisely.
  */
  /* 
  more levels
  */
  /*********************
  POSTS & CONTENT STYLES
  *********************/
  .series-header img {
    float: left;
    margin: 1em 1em 0 0; }

  /* want to style individual post classes? Booya! */
  /* post by id (i.e. post-3) */
  /* general post style */
  /* general article on a page style */
  /* general style on an attatchment */
  /* sticky post style */
  /* hentry class */
  /* style by category (i.e. category-videos) */
  /* style by tag (i.e. tag-news) */
  /* post meta */
  /* post content */
  /* this adds the quote before the blockquote */
  /* at this larger size, we can start to align images */
  .alignleft, img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left; }

  .alignright, img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right; }

  .aligncenter, img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both; }

  /* image gallery styles */
  /******************************************************************
  PAGE NAVI STYLES
  ******************************************************************/
  /* current page link */
  /* hovering on current page link */
  /* common styles for page-navi links */
  /* previous link */
  /* next page link */
  /* first page link */
  /* last page link */
  /* fallback previous & next links */
  /******************************************************************
  COMMENT STYLES
  ******************************************************************/
  /* h3 comment title */
  /* number of comments span */
  /* change number for different depth */
  /******************************************************************
  COMMENT FORM STYLES
  ******************************************************************/
  /* form validation */
  /* no comments */
  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
  /*
  check your menus here. do they look good?
  do they need tweaking?
  */
  /* hover styles */
  /* highlight current page */
  /* 
  be careful with the depth of your menus.
  it's very rare to have multi-depth menus in
  the footer.
  */ }
/* end of media query */
/******************************************************************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and 
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 768px) {
  /* styles in 768up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Tablet & Small Desktop Stylesheet
  
  Here's where you can start getting into the good stuff.
  This size will work on iPads, other tablets, and desktops.
  So you can start working with more styles, background images,
  and other resources. You'll also notice the grid starts to
  come into play. Have fun!
  
  ******************************************************************/
  /*********************
  GENERAL STYLES
  *********************/
  #container {
    background-image: url(../images/container-bg.png); }

  h1, .h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0; }

  h2, .h2 {
    font-weight: normal; }

  /********************
  WORDPRESS BODY CLASSES
  style a page via class
  ********************/
  /* home page */
  /* archive page */
  /* date archive page */
  /* replace the number to the corresponding page number */
  /* search page */
  /* search result page */
  /* no results search page */
  /* individual paged search (i.e. body.search-paged-3) */
  /* 404 page */
  /* single post page */
  /* individual post page by id (i.e. body.postid-73) */
  /* individual paged single (i.e. body.single-paged-3) */
  /* attatchment page */
  /* individual attatchment page (i.e. body.attachmentid-763) */
  /* style mime type pages */
  /* author page */
  /* user nicename (i.e. body.author-samueladams) */
  /* paged author archives (i.e. body.author-paged-4) for page 4 */
  /* category page */
  /* individual category page (i.e. body.category-6) */
  /* replace the number to the corresponding page number */
  /* tag page */
  /* individual tag page (i.e. body.tag-news) */
  /* replace the number to the corresponding page number */
  /* custom page template page */
  /* individual page template (i.e. body.page-template-contact-php */
  /* replace the number to the corresponding page number */
  /* replace the number to the corresponding page number */
  /* if user is logged in */
  /* paged items like search results or archives */
  /* individual paged (i.e. body.paged-3) */
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  .wrap {
    max-width: 960px; }

  /***** Grid Options down here, where they are usable ******/
  /* layout options ( all have margins right & left of 1%) */
  .col60 {
    width: 6.3829787%; }

  /* width 60px  / grid_1  */
  .col140 {
    width: 14.893617%; }

  /* width 140px / grid_2  */
  .col220 {
    width: 23.404255%; }

  /* width 220px / grid_3  */
  .col300 {
    width: 31.914894%; }

  /* width 300px / grid_4  */
  .col380 {
    width: 40.425532%; }

  /* width 380px / grid_5  */
  .col480 {
    width: 48.936170%; }

  /* width 480px / grid_6  */
  .col540 {
    width: 57.446809%; }

  /* width 540px / grid_7  */
  .col620 {
    width: 65.957447%; }

  /* width 620px / grid_8  */
  .col700 {
    width: 74.468085%; }

  /* width 700px / grid_9  */
  .col780 {
    width: 82.978723%; }

  /* width 780px / grid_10 */
  .col860 {
    width: 91.489362%; }

  /* width 860px / grid_11 */
  .col940 {
    width: 100.0%; }

  /* width 940px / grid_12 */
  /* layout & column defaults */
  .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 {
    display: inline;
    float: left;
    position: relative;
    margin-left: 1.0638298%;
    /* 10px */
    margin-right: 1.0638298%;
    /* 10px */ }

  /* floats */
  .left {
    float: left; }

  .right {
    float: right; }

  /* default styles & fixes */
  .first {
    margin-left: 0; }

  /* fixes alignment */
  .last {
    margin-right: 0; }

  /* fixes alignment */
  /*********************
  HEADER SYTLES
  *********************/
  .header {
    background-size: 960px auto;
    padding-bottom: 2px; }

  .page-template-page-home-php #inner-content {
    max-width: 844px; }
  .page-template-page-home-php #news > h1 {
    margin: 0; }
  .page-template-page-home-php .header {
    background-image: url(../images/hp-banner.jpg);}
    /*
  .page-template-page-home-php .header .nav {
    display: none; }
    */
  .page-template-page-home-php #searchform {
    margin: 0; }

  .header .icons {
    position: relative;
    float: right; }

  #logo {
    display: block; }

  #logo a {
    width: 400px;
    height: 144px;
    margin: 0 auto; }

  #search-container {
    display: none; }

  /*********************
  NAVIGATION STYLES
  *********************/
  .nav {
    background: #111;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.77) inset;
    height: auto;
    overflow: visible;
    transition: none;
    -moz-transition: none;
    /* Firefox 4 */
    -webkit-transition: none;
    /* Safari and Chrome */
    -o-transition: none;
    /* Opera */
    /* highlight current page */
    /*
    plan your menus and drop-downs wisely.
    */
    /* show the dropdowns on hover */
    /* highlight current page */
    /* 
    more levels
    */ }
    .nav > .menu {
      background: url(../images/nav-bg.png) no-repeat top center;
      padding-top: 1px; }
    .nav .menu {
      font-size: 12px;
      text-transform: uppercase; }
    .nav .menu ul {
      margin: 0 auto;
      display: table; }
    .nav .menu li {
      float: left;
      position: relative; }
    .nav .menu li:hover {
      background: #333; }
    .nav .menu li a {
      color: #ddd;
      padding: 8px;
      border-bottom: 0;
      text-shadow: 1px 1px 2px #000; }
    .nav .menu li a:hover {
      background: #444;
      color: #e00; }
    .nav .menu > ul > li.current-menu-item > a,
    .nav .menu > ul > li.current_page_item > a,
    .nav .menu > ul > li.current-page-ancestor > a,
    .nav .menu > ul > li.current_page_ancestor > a {
      text-shadow: 0 0 2px black, 5px 0 20px red, -5px 0 20px red, 10px 0 30px red, -10px 0 30px red, 20px 0 40px red, -20px 0 40px red; }
    .nav .menu > ul > li.current-menu-item:hover > a,
    .nav .menu > ul > li.current_page_item:hover > a,
    .nav .menu > ul > li.current-page-ancestor:hover > a,
    .nav .menu > ul > li.current_page_ancestor:hover > a {
      text-shadow: none; }
    .nav .menu ul li ul {
      background: #333;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
      width: 200px;
      position: absolute;
      display: none;
      z-index: 8999; }
    .nav .menu > ul > li > a::before {
      content: '| ';
      margin-left: -8px;
      margin-right: 8px;
      color: #c00; }
    .nav .menu > ul > li:hover > a::before {
      visibility: hidden; }
    .nav .menu > ul > li:first-child > a::before {
      content: none;
      margin: 0; }
    .nav .menu ul li:hover ul {
      top: auto;
      display: block; }
    .nav .menu ul ul li a {
      padding-left: 10px;
      border-right: 0;
      display: block;
      width: 180px;
      border-bottom: 1px solid #444; }
    .nav .menu ul li:last-child a {
      border-bottom: 0; }
    .nav .menu ul ul li.current-menu-item a,
    .nav .menu ul ul li.current_page_item a,
    .nav .menu ul ul li.current-page-ancestor > a,
    .nav .menu ul ul li.current_page_ancestor > a {
      background: #222;
      color: #c00; }

  .nav-toggle {
    display: none; }

  /*********************
  POSTS & CONTENT STYLES
  *********************/
  #featured {
    margin: -116px -5.7% 0; }
    #featured > div {
      width: 758px;
      margin: 0 auto;
      position: relative; }
    #featured .fnav {
      background: url(../images/fnav-bg.jpg);
      display: block;
      float: right;
      margin-top: 8px;
      width: 155px;
      z-index: 1000;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.75);
      /* highlight current page */
      /*
      plan your menus and drop-downs wisely.
      */
      /* show the dropdowns on hover */ }
      #featured .fnav .menu {
        width: auto; }
      #featured .fnav .menu li.current-menu-item,
      #featured .fnav .menu li.current_page_item,
      #featured .fnav .menu li.current-page-ancestor,
      #featured .fnav .menu li.current_page_ancestor {
        box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.5) inset; }
        #featured .fnav .menu li.current-menu-item > a,
        #featured .fnav .menu li.current_page_item > a,
        #featured .fnav .menu li.current-page-ancestor > a,
        #featured .fnav .menu li.current_page_ancestor > a {
          text-shadow: 0 0 2px black, 20px 0 50px red, -20px 0 50px red, 20px 0 70px red, -20px 0 70px red, 30px 0 85px red, -30px 0 85px red, 20px 0 95px red, -20px 0 95px red, 40px 0 100px red, -40px 0 100px red; }
      #featured .fnav .menu ul li ul {
        background: #333;
        background: rgba(51, 51, 51, 0.9);
        box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
        top: 17px;
        right: 155px;
        width: 0;
        height: 324px;
        position: absolute;
        overflow: hidden;
        z-index: 8999;
        transition: width 500ms;
        -moz-transition: width 500ms;
        /* Firefox 4 */
        -webkit-transition: width 500ms;
        /* Safari and Chrome */
        -o-transition: width 500ms;
        /* Opera */ }
      #featured .fnav .menu ul li:hover ul {
        width: 586px; }
      #featured .fnav .menu ul li ul:hover {
        overflow: visible; }
      #featured .fnav .menu ul ul li a {
        color: #fff;
        margin: 4px;
        padding: 5px 10px;
        display: block;
        width: 28%;
        min-height: 5em;
        max-height: 342px;
        overflow: hidden;
        border-radius: 4px;
        transition: max-height 500ms, background 500ms;
        -moz-transition: max-height 500ms, background 500ms;
        /* Firefox 4 */
        -webkit-transition: max-height 500ms, background 500ms;
        /* Safari and Chrome */
        -o-transition: max-height 500ms, background 500ms;
        /* Opera */ }
        #featured .fnav .menu ul ul li a .sub {
          color: #ddd;
          font-size: 12px; }
      #featured .fnav .menu ul ul li a:hover {
        background: #555;
        max-height: 550px; }
      #featured .fnav .menu ul li:last-child a {
        border-bottom: 0; }
      #featured .fnav .menu > ul {
        background: url(../images/fnav-shiny.png) no-repeat center top;
        margin: 0;
        height: 339px;
        z-index: 1001; }
        #featured .fnav .menu > ul > li {
          border: solid 1px #333;
          height: 25%;
          margin-bottom: -1px;
          box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5) inset; }
          #featured .fnav .menu > ul > li > a {
            display: table;
            height: 100%;
            width: 100%;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 2px #000;
            text-transform: uppercase; }
            #featured .fnav .menu > ul > li > a span {
              display: table-cell;
              text-align: center;
              vertical-align: middle; }
        #featured .fnav .menu > ul > li:hover > a {
          background: rgba(255, 255, 255, 0.1); }
        #featured .fnav .menu > ul > li:first-child {
          display: none; }
    #featured a, #featured img {
      border: 0; }
    #featured a {
      width: auto;
      margin: 0; }
    #featured #slides {
         width: 595px;
    border: outset 1px #222;
    padding: 0;
    background: #111;
    box-shadow: 0 0 40px rgb(0 0 0 / 75%);
    padding-bottom: 0;
    }
    #featured .slides_container {
      width: 579px;
      height: 326px;
      overflow: hidden;
      position: relative;
      display: none;
        border: 0;
    padding: 8px; }
    #featured .slides_container a {
      width: 578px;
      height: 326px;
      display: block; }
      #featured .slides_container a img {
        border: 1px inset #222;
        width: 576px;
        height: 324px; }
    #featured .pagination {
      margin: -24px auto 4px;
      width: auto;
      display: table;
      z-index: 1000;
      position: relative; }
    #featured .pagination li {
      float: left;
      margin: 0 1px;
      list-style: none;
      z-index: 1001; }
    #featured .pagination li a {
      display: block;
      width: 12px;
      height: 0;
      padding-top: 12px;
      background-image: url(../images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden; }
    #featured .pagination li.current a {
      background-position: 0 -12px; }

  #practices-4w {
    display: block; }
    #practices-4w h1 {
      text-align: center;
      margin-top: 2em; }
    #practices-4w ul {
      margin: 0 auto;
      padding: 0;
      list-style: none;
      width: 92%; }
      #practices-4w ul li {
        float: left;
        width: 25%; }
        #practices-4w ul li a {
          display: block;
          margin: 0 auto;
          width: 162px;
          height: 162px;
          text-indent: -10000px;
          background: url(../images/4words.png); }
      #practices-4w ul #loving-4w a {
        background-position: 0 0; }
      #practices-4w ul #reaching-4w a {
        background-position: -162px 0; }
      #practices-4w ul #connecting-4w a {
        background-position: -324px 0; }
      #practices-4w ul #equipping-4w a {
        background-position: -486px 0; }
      #practices-4w ul #loving-4w a:hover {
        background-position: 0 -191px; }
      #practices-4w ul #reaching-4w a:hover {
        background-position: -162px -191px; }
      #practices-4w ul #connecting-4w a:hover {
        background-position: -324px -191px; }
      #practices-4w ul #equipping-4w a:hover {
        background-position: -486px -191px; }

  #content {
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2) inset; }

  #main {
    background: #dfddda;
    box-shadow: 5px 0 30px 15px #dfddda;
    border-radius: 15px;
    margin: 2em 0; }

  .tab_box .tab_bar {
    display: block;
    margin: -3em -5.6% 0;
    padding: 0 0 0 150px;
    list-style: none;
    border-bottom: 1px solid #aaa; }
    .tab_box .tab_bar li {
      float: left;
      cursor: pointer;
      background: #cfccca;
      padding: 8px 16px;
      margin: 1px 6px -1px 0;
      font-size: 1.25em;
      font-family: Georgia, serif; }
    .tab_box .tab_bar li:hover {
      background: #efeeea; }
    .tab_box .tab_bar li.active {
      background: #dfddda;
      border: 1px solid #aaa;
      border-bottom: 0;
      padding-bottom: 9px;
      margin: 0 5px -1px -1px; }
  .tab_box .tab_bar::after {
    content: '';
    display: table;
    clear: both; }

  .tab_box.enabled .tab_page,
  .tab_box.enabled .tab_page .tab_title {
    display: none; }

  .tab_box.enabled .tab_page.active {
    display: block;
    clear: both; }

  .page-template-page-sermons-php .series ul li {
    margin: 0 10px; }
  .page-template-page-sermons-php .scripture .left {
    margin-right: 2em; }

  /* want to style individual post classes? Booya! */
  /* post by id (i.e. post-3) */
  /* general post style */
  /* general article on a page style */
  /* general style on an attatchment */
  /* sticky post style */
  /* hentry class */
  /* style by category (i.e. category-videos) */
  /* style by tag (i.e. tag-news) */
  /* post meta */
  /* post content */
  /* this adds the quote before the blockquote */
  /* image alignment */
  /* image gallery styles */
  /******************************************************************
  PAGE NAVI STYLES
  ******************************************************************/
  /* current page link */
  /* hovering on current page link */
  /* common styles for page-navi links */
  /* previous link */
  /* next page link */
  /* first page link */
  /* last page link */
  /* fallback previous & next links */
  /******************************************************************
  COMMENT STYLES
  ******************************************************************/
  /* h3 comment title */
  /* number of comments span */
  /* change number for different depth */
  /******************************************************************
  COMMENT FORM STYLES
  ******************************************************************/
  /* form validation */
  /* no comments */
  /*********************
  SIDEBARS & ASIDES
  *********************/
  .sidebar {
    border-top: 0;
    background: none;
    margin: 0;
    padding: 0; }

  .widget {
    color: #222;
    float: none;
    margin-right: 0; }

  .sidebar {
    margin-top: 2.2em; }
    .sidebar .widget {
      padding: 0 10px;
      margin: 2.2em 0; }
    .sidebar .widgettitle {
      border-bottom: 2px solid #444;
      margin-bottom: 0.75em; }
    .sidebar .widget li {
      margin-bottom: 0.75em; }
    .sidebar .widget li ul {
      margin-top: 0.75em;
      padding-left: 1em; }

  .sidebar .widget.random_from_cat {
    background: #111;
    border-radius: 6px;
    overflow: hidden; }
    .sidebar .widget.random_from_cat blockquote {
      text-align: justify; }
    .sidebar .widget.random_from_cat .widgettitle {
      display: none;
      border: 0; }

  .footer .widget.random_from_cat {
    margin: 1em 0 2em; }
    .footer .widget.random_from_cat blockquote, .footer .widget.random_from_cat p {
      margin: 0; }

  .widget.random_from_cat {
    color: #ddd;
    display: block;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.1em; }
    .widget.random_from_cat blockquote {
      position: relative;
      margin: 0;
      text-indent: 10px; }
      .widget.random_from_cat blockquote p::before {
        float: left;
        margin: 0 -4px -7px -12px;
        content: url(../images/quote-start.png); }
      .widget.random_from_cat blockquote p::after {
        margin: 0 0 -4px -4px;
        position: absolute;
        content: url(../images/quote-end.png); }
    .widget.random_from_cat .verse-reference,
    .widget.random_from_cat .quote-reference {
      font-size: 0.9em; }
    .widget.random_from_cat .verse-reference {
      display: block;
      text-align: right;
      font-size: 0.9em;
      padding-right: 1em; }
    .widget.random_from_cat .verse-reference::before,
    .widget.random_from_cat .quote-reference::before {
      content: '\2013';
      margin-right: 0.5em; }

  /* links widget */
  /* meta widget */
  /* pages widget */
  /* recent-posts widget */
  /* archives widget */
  /* tag-cloud widget */
  /* calendar widget */
  /* category widget */
  /* recent-comments widget */
  /* search widget */
  #searchform {
    padding: 0 10px; }

  .sidebar #searchform {
    display: block;
    position: relative; }

  #searchform span {
    display: table;
    width: 100%; }

  #searchform input[type=text] {
    background: #777;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #666;
    padding: 3px 0;
    text-indent: 10px;
    width: 100%; }

  #searchform input[type=text]:focus {
    box-shadow: none; }

  #searchform input[type=submit] {
    background-color: transparent;
    background-position: 6px center;
    border: 0;
    position: absolute;
    padding-right: 24px;
    right: 1px;
    top: 1px;
    width: 38px; }

  /* text widget */
  /*********************
  FOOTER STYLES
  *********************/
  .footer {
    border-top: 1px solid #333; }

  /*
  you'll probably need to do quite a bit
  of overriding here if you styled them for
  mobile. Make sure to double check these!
  */
  /* hover styles */
  /* highlight current page */
  /* 
  be careful with the depth of your menus.
  it's very rare to have multi-depth menus in
  the footer.
  */ }
/* end of media query */
/******************************************************************
DESKTOP 
This is the average viewing window. So Desktops, Laptops, and 
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 992px) {
  /* styles in 992up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Average Desktop View
  
  Here's where you can start getting into the good stuff.
  This size will work on iPads, other tablets, and desktops.
  So you can start working with more styles, background images,
  and other resources. You'll also notice the grid starts to
  come into play. Have fun!
  
  ******************************************************************/
  .header {
    background: #111111 url(../images/banner-big.jpg) no-repeat top center;
    background: url(../images/banner-big.jpg) no-repeat top center, url(../images/container-bg.png) #121212;
    background-size: auto; }

  #main {
    margin: 4.2em 0 2.2em; }
    #main .series-header,
    #main > .archive_title {
      margin-top: -1em; }
    #main > article:first-child .single-title, #main > article:first-child .page-title {
      margin: -1em 0 0; }

  header.image img {
    display: inline;
    width: auto;
    height: auto;
    max-width: 100%;
    margin-top: -1em; }
  header.image .page-title {
    display: table;
    text-indent: -10000px;
    margin: 0;
    height: 1px;
    width: 1px;
    position: absolute; }

  .page-template-page-home-php .header {
    background-image: url(../images/hp-banner-big.jpg);
    background: url(../images/banner-big.jpg) no-repeat top center, url(../images/container-bg.png) #121212;
    background-size: auto; }
  .page-template-page-home-php #news > h1 {
    margin-top: -1em; }

  .page-template-page-sermons-php #main {
    min-height: 940px; }
    .page-template-page-sermons-php #main .archive_title {
      margin: 0 0 2em;
      padding: 0 45px; }
  .page-template-page-sermons-php .tab_page {
    max-width: 890px;
    margin: 0 auto; }
    .page-template-page-sermons-php .tab_page .h3 {
      margin-left: 1.3%; }
  .page-template-page-sermons-php .series ul li {
    margin: 0 1.26%; }

  .tab_box .tab_bar {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4) inset;
    position: absolute;
    margin: -5.2em 0 0 250px;
    padding: 4px;
    border-bottom: 0;
    border-radius: 6px; }
    .tab_box .tab_bar li {
      float: left;
      cursor: pointer;
      background: none;
      padding: 0;
      margin: 0 20px;
      font-size: 1.25em;
      font-family: Georgia, serif; }
    .tab_box .tab_bar li:hover {
      background: none;
      color: #e00; }
    .tab_box .tab_bar li.active {
      background: none;
      border: none;
      border-bottom: 0;
      padding-bottom: 0;
      margin: 0 20px;
      text-shadow: 0 0 2px white, 10px 0 30px red, -10px 0 30px red, 20px 0 40px red, -20px 0 40px red; }
  .tab_box .tab_bar::after {
    content: '';
    display: table;
    clear: both; }

  #logo a {
    width: 534px;
    height: 204px; }

  #content {
    box-shadow: 0 20px 90px rgba(0, 0, 0, 0.4) inset; }

  #featured {
    margin: 5px 0; }
    #featured > div {
      width: 844px; }
      /*
    #featured > div::after {
      content: url(../images/thingy.png);
      position: absolute;
      top: 8px;
      left: 674px; }
      */
    #featured .fnav .menu ul li ul {
      height: 360px; }
    #featured .fnav .menu ul li:hover ul {
      width: 672px; }
    #featured .fnav .menu > ul {
      height: 378px; }
    #featured #slides {
          width: 659px;
    margin: 0 auto;
    }
    #featured .slides_container {
      width: 643px;
      height: 382px; }
    #featured .slides_container a {
      width: 642px;
      height: 382px; }
      #featured .slides_container a img {
        border: 1px inset #222;
        width: 640px;
        height: 360px; }

  .footer {
    color: #aaa;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5) inset; } }
/* end of media query */
/******************************************************************
LARGE VIEWING SIZE 
This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {
  /* styles in 1240up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Super Large Monitor Stylesheet
  
  You can add some advanced styles here if you like. This kicks in
  on larger screens.
  
  ******************************************************************/ }
/* end of media query */
/******************************************************************
PRINT STYLESHEET
******************************************************************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }

  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2, h3 {
    page-break-after: avoid; } }