/* IMPORT THE FRAMEWORK */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/*  LINEAR GRADIENTS  */
/*  BREAKPOINTS  */
/*  VISUAL STYLES  */
.blog-posts .text-wrapper time, .blog-posts .text-wrapper p {
  font-family: Helvetica, sans-serif;
}

.secondary-nav a {
  text-transform: uppercase;
}

/*  LAYOUT FRAMEWORK  */
.blog-posts .img-wrapper a, .blog-posts .text-wrapper, .blog-posts .text-wrapper time, .blog-posts .text-wrapper a, .secondary-nav a {
  display: block;
}

.blog-posts .img-wrapper a, .blog-posts .text-wrapper {
  box-sizing: border-box;
}

.blog-posts, .blog-posts article, .pagination {
  clear: both;
}

.blog-posts:after, .blog-posts article:after, .pagination:after {
  display: table;
  content: '';
  clear: both;
}

/*  COLUMN FRAMEWORK  */
.blog-posts .img-wrapper a, .blog-posts .text-wrapper {
  float: left;
}

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
.blog-posts .text-wrapper time, .blog-posts .text-wrapper p {
  font-weight: normal;
  color: #fff;
  font-size: 0.9em;
  line-height: 1.5em;
  padding: 0.9em 0;
}

.blog-posts .text-wrapper a, .secondary-nav a {
  color: #f56f22;
  transition: .1s ease-in-out;
}

.blog-posts .text-wrapper a:hover, .secondary-nav a:hover {
  color: #792f05;
}

.blog-posts .text-wrapper a:active, .secondary-nav a:active {
  color: #7a7a7f;
}

.blog-posts article {
  background-color: #0d0e0e;
  /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#0d0e0e));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #262626, #0d0e0e);
  /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #262626, #0d0e0e);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #262626, #0d0e0e);
  /* IE10 */
  background-image: -o-linear-gradient(top, #262626, #0d0e0e);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #262626, #0d0e0e);
  color: #FFF;
}

/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
.blog-posts article {
  padding: 1.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #f56f22;
}

.blog-posts article:hover {
  outline: 1px solid #333;
}

.blog-posts .img-wrapper a {
  width: 25%;
}

.blog-posts .text-wrapper {
  width: 70%;
  padding-left: 1.5em;
}

.blog-posts .text-wrapper h2 {
  margin-bottom: -8px;
}

.blog-posts .text-wrapper time {
  font-size: .8em;
  text-transform: uppercase;
  color: #aaa;
}

.secondary-nav {
  padding-bottom: 3em;
}

.secondary-nav a {
  color: #fff;
  padding: 0.8em 0 0.8em 1.5em;
  border-bottom: 1px solid #333;
}

.secondary-nav a a.hover {
  color: #f56f22;
}

.pagination {
  text-align: center;
}

.pagination .prev {
  float: left;
}

.pagination .next {
  float: right;
}

/* MEDIA QUERIES */
@media screen and (max-width: 700px) {
  .blog-posts article {
    padding: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #f56f22;
  }
  .blog-posts article:hover {
    outline: 1px solid #333;
  }
  .blog-posts .img-wrapper a {
    width: 100%;
    margin-bottom: 1.5em;
  }
  .blog-posts .text-wrapper {
    width: 100%;
    padding-left: 0;
  }
  .blog-posts .text-wrapper h2 {
    margin-bottom: -8px;
  }
  .blog-posts .text-wrapper time {
    font-size: .8em;
    text-transform: uppercase;
    color: #aaa;
  }
}