/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*
    ! Typebase.less v0.1.0 | MIT License 
    https://github.com/devinhunt/typebase.css/
*/
/* Setup */
html {
  /* Change default typefaces here */
  font-family: "myriad-pro", Helvetica, Verdana, Arial, sans-serif;
  font-size: 112.5%;
  font-size: 18px;
  -webkit-font-smoothing: antialiased; }

/* Copy & Lists */
p, label {
  line-height: 1.375rem;
  margin-top: 0;
  margin-bottom: 1.375rem; }

ul, ol, dl {
  margin-top: 1.375rem;
  margin-bottom: 1.375rem; }

li, dd, dt {
  line-height: 1.375rem; }

ul ul, ol ol, dl dl {
  margin-top: 0;
  margin-bottom: 0; }

blockquote {
  line-height: 1.375rem;
  margin-top: 1.375rem;
  margin-bottom: 1.375rem; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  /* Change heading typefaces here */
  margin-top: 1.375rem;
  margin-bottom: 0;
  line-height: 1.375rem; }

h1 {
  font-size: 4.242rem;
  line-height: 4.125rem;
  margin-top: 2.75rem; }

h2 {
  font-size: 3.1815rem;
  line-height: 3.09375rem;
  margin-top: 3.09375rem; }

h3, legend {
  font-size: 2.121rem; }

h4 {
  font-size: 1.2726rem; }

h5 {
  font-size: 0.707rem; }

h6 {
  font-size: 0.4713333333rem; }

/* Tables */
table {
  border-spacing: 0px;
  border-collapse: collapse;
  margin-top: 1.375rem; }

td, th {
  line-height: 24.75px;
  padding: 9px; }

/* Code blocks */
code {
  vertical-align: bottom; }

/* Leading paragraph text */
.lead {
  font-size: 1.6968rem; }

/* Hug the block above you */
.hug {
  margin-top: 0; }

/* SITE NAME
=========================================================*/
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  background-color: #fff;
  margin: 0;
  overflow-x: hidden;
  padding: 0; }

/* Core HTML Styles
=========================================================*/
.screen {
  display: block; }

.mobile {
  display: none; }

/*  Clickable elements
------------------------------*/
a {
  color: #333;
  cursor: pointer; }
  a:hover {
    color: inherit; }
  a:active {
    color: inherit;
    outline: none; }
  a:visited {
    color: inherit; }
  a:focus {
    color: inherit;
    outline: none; }

button {
  cursor: pointer; }

input[type="button"], input[type="submit"], input[type="image"] {
  cursor: pointer; }
input[type="text"], input[type="email"], input[type="password"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  margin-top: 4px;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none; }

/* Removed dotted outlines around active links in FF */
:focus, :active, :-moz-any-link:focus {
  -moz-outline-style: none;
  outline: none; }

/*  Type styling - Typography is in _typography.scss
-----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  color: #333;
  clear: both;
  text-transform: capitalize; }

h2.archive {
  color: #fff; }

li {
  line-height: 1.375rem;
  margin: 0;
  padding: 4.5px; }

dl, ul, ol {
  margin: 0;
  padding: 0; }

dd, dt {
  margin: 10px 0;
  padding: 0; }

dt {
  font-weight: bold; }

hr {
  border: 1px solid #fff;
  clear: both; }

strong, b {
  font-weight: bold; }

/* Form Layout
-------------------------*/
form label {
  display: block; }
form div.form-group {
  margin: 10px 0; }

/* Common Elements
-------------------------*/
span.note {
  display: block;
  font-size: 80%; }

.col_left {
  float: left;
  overflow: hidden;
  width: 50%; }

.col_right {
  float: right;
  overflow: hidden;
  width: 50%; }

/* Structural Elements
-------------------------*/
header {
  background-color: #10243c;
  background: -webkit-gradient(linear, left top, right top, from(#10243c), to(rgba(0, 0, 0, 0.5)));
  background: -webkit-linear-gradient(top, #10243c, rgba(0, 0, 0, 0.5));
  background: -moz-linear-gradient(top, #10243c, rgba(0, 0, 0, 0.5));
  background: -o-linear-gradient(top, #10243c, rgba(0, 0, 0, 0.5));
  background: -ms-linear-gradient(top, #10243c, rgba(0, 0, 0, 0.5));
  background: linear-gradient(top, #10243c, rgba(0, 0, 0, 0.5));
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000; }
  header h1 {
    color: #fff;
    font-size: 32px;
    line-height: 36px;
    margin: 10px 0 0 50px;
    padding: 0; }
    header h1 a {
      color: #fff;
      text-decoration: none; }

header nav {
  position: absolute;
  top: 10px;
  right: 20px; }
  header nav a {
    color: #fff;
    display: inline-block;
    font-size: 15px;
    line-height: 15px; }
    header nav a:hover {
      color: #fff; }
    header nav a:active, header nav a:visited {
      color: #fff; }

footer {
  background: #000;
  color: #eee;
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%; }
  footer p {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0; }

/* Page Elements 
-----------------------------*/
.wrapper {
  /*
  background: url(../images/bkgd_house_winter.jpg);
  background-attachment: fixed;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  */
  background-color: #10243c;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%; }

.container {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1000px; }

/* Nav Slider 
-----------------------------*/
.nav-slider {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #000;
  color: #fff;
  height: 100%;
  overflow: hidden;
  padding: 20px 20px 20px 100px;
  position: absolute;
  top: 0px;
  right: -502px;
  width: 480px;
  z-index: 9001;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .nav-slider.active {
    right: 0; }
  .nav-slider a {
    color: #fff; }
  .nav-slider .close {
    border: 2px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    height: 40px;
    padding-top: 3px;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    width: 40px; }

div.nav-list {
  margin-top: 0; }
  div.nav-list h3, div.nav-list dt {
    font-size: 32px;
    font-weight: bold;
    line-height: 36px;
    overflow: hidden;
    margin: 0 0 20px 0;
    padding: 0; }
    div.nav-list h3 a, div.nav-list dt a {
      text-decoration: none; }
  div.nav-list dd {
    margin: 10px 0 10px 20px;
    padding: 0; }
    div.nav-list dd:last-child {
      margin-bottom: 1.375rem; }
    div.nav-list dd a {
      text-decoration: underline; }

dl.social-links {
  margin-top: 40px; }

/* Article Elements
-----------------------------*/
.block {
  background: rgba(255, 255, 255, 0.9);
  margin: 0 0 60px 0;
  padding: 0 0 20px 0;
  position: relative; }
  .block:last-child {
    margin-bottom: 0; }
  .block h2 {
    margin: 0 0 40px 0;
    padding-top: 40px; }

.content {
  padding: 0 40px; }

.cover-image {
  max-height: 800px;
  overflow: hidden; }
  .cover-image img {
    height: auto;
    width: 100%; }

dl.article-meta {
  color: #444;
  font-size: 14px;
  margin: 20px auto 0 auto;
  padding: 0;
  width: 50%; }
  dl.article-meta dd, dl.article-meta dt {
    padding: 0;
    text-align: center; }

.author-photo {
  border-radius: 30px;
  height: 60px;
  width: 60px; }

.box {
  float: left;
  width: 200px; }

.pagination {
  background: #39495d;
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  margin: 0 0 60px 0;
  padding: 20px; }
  .pagination li {
    display: inline-block;
    padding: 0 5px; }
    .pagination li a {
      color: #fff; }

/* Index Page Blocks
-----------------------------*/
.wrapper.index {
  background: #000;
  background-image: none; }
  .wrapper.index .container {
    width: 100%;
    max-width: 100%; }
  .wrapper.index .block {
    margin: 0;
    padding: 0 0 50px 0; }
    .wrapper.index .block .content {
      background: rgba(255, 255, 255, 0.8);
      margin: 0 auto;
      overflow: hidden;
      padding: 0;
      width: 1000px; }
    .wrapper.index .block .main {
      float: left;
      margin: 40px;
      padding: 0;
      width: 600px; }
    .wrapper.index .block .sidebar {
      background: rgba(0, 0, 0, 0.7);
      float: right;
      margin: 20px;
      padding: 20px;
      width: 280px; }
      .wrapper.index .block .sidebar dt, .wrapper.index .block .sidebar dd {
        color: #fff;
        font-size: 16px;
        line-height: 18px;
        margin-top: 0;
        margin-bottom: 10px; }
        .wrapper.index .block .sidebar dt a, .wrapper.index .block .sidebar dd a {
          color: #fff;
          text-decoration: none; }
        .wrapper.index .block .sidebar dt.link, .wrapper.index .block .sidebar dd.link {
          border-top: 1px solid #fff;
          margin-top: 10px;
          padding-top: 10px; }
    .wrapper.index .block h2 {
      background: #000;
      color: #fff;
      font-size: 32px;
      line-height: 36px;
      margin: 0 0 50px 0;
      padding: .5em 50px; }
    .wrapper.index .block.intro {
      padding-top: 120px; }
      .wrapper.index .block.intro .main {
        float: none;
        width: auto; }

.block.intro, .block.strawbale, .block.offgrid, .block.passivesolar {
  background-image: url(../images/bg_index_intro.jpg);
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 800px;
  width: 100%; }

.block.strawbale {
  background-image: url(../images/bg_index_straw_bale.jpg); }

.block.offgrid {
  background-image: url(../images/bg_index_renewable.jpg); }

.block.passivesolar {
  background-image: url(../images/bg_index_passive_solar.jpg); }

.block.navfooter {
  background: #10243c;
  color: #fff;
  overflow: hidden; }
  .block.navfooter .col_left {
    margin: 0 0 0 50px;
    width: 45%; }
  .block.navfooter h4 {
    color: #fff;
    margin: 0 0 25px 0; }
  .block.navfooter a {
    color: #fff; }

ul.nav_categories li {
  color: #fff;
  float: left;
  margin: 5px 0;
  padding: 0;
  width: 45%; }

/* Gallery Code
-----------------------------*/
.gallery-holder {
  overflow: hidden; }

/* Pika Overrides */
.pika-imgnav, .pika-textnav {
  display: none; }

ul.gallery.pika-thumbs {
  padding: 0; }
  ul.gallery.pika-thumbs li {
    margin: 20px 20px 0 0; }

.pika-imgnav a.previous {
  left: 0px;
  width: 60px; }

.pika-imgnav a.next {
  right: 0px;
  width: 60px; }

.pika-counter {
  bottom: 25px; }

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 640px) and (orientation: portrait) {
  .screen {
    display: none; }

  .mobile {
    display: block; }

  header h1 {
    font-size: 24px;
    line-height: 28px;
    margin: 10px 0 0 10px; }

  .content {
    width: 100%; }

  .main {
    float: none;
    width: 100%; }

  .sidebar {
    float: none;
    width: 100%; }

  .nav-slider {
    display: none; }

  dl.article-meta {
    width: 100%; }

  .wrapper.index .block {
    margin: 0;
    padding: 0; }
    .wrapper.index .block .content {
      margin-top: 210px;
      width: 100%; }
    .wrapper.index .block .main {
      float: none;
      margin: 0;
      padding: 10px;
      width: 100%; }
    .wrapper.index .block .sidebar {
      float: none;
      margin: 0;
      padding: 10px;
      width: 100%; }
    .wrapper.index .block.intro {
      padding-top: 55px; }

  .block.intro, .block.strawbale, .block.offgrid, .block.passivesolar {
    background-attachment: scroll;
    background-position: 0 60px;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 0; }

  .block.intro {
    padding-top: 0px; }

  .block.navfooter .col_left {
    margin: 0;
    padding: 0 10px 30px 10px;
    width: 100%; }
  .block.navfooter h4 {
    margin: 25px 0; }

  ul.nav_categories li {
    float: none;
    width: 100%; } }
/* #### Mobile Phones Landscape #### 
@media screen and (max-device-width: 640px) and (orientation: landscape){
  .screen {
    display: none;}
  
  .mobile {
    display: block;}
}
*/
/* #### Mobile Phones Portrait or Landscape #### 
@media screen and (max-device-width: 640px){
  .screen {
    display: none;}
  
  .mobile {
    display: block;}
}

*/
/* #### iPhone 4+ Portrait or Landscape #### 
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  .screen {
    display: none;}
  
  .mobile {
    display: block;}
}

*/
/* #### Tablets Portrait or Landscape #### 
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  .screen {
    display: none;}
  
  .mobile {
    display: block;}
}

*/
/* #### Desktops #### */
@media screen and (min-width: 1024px) {
  /* some CSS here */ }