/*
 *
 *  HPSTR
 *
 *  Designer: Michael Rose
 *  Twitter: http://twitter.com/mmistakes
 *
*/
/* ==========================================================================
   SCSS Variables
   ========================================================================== */
/*
   Page
   ========================================================================== */
/*
   Typography
   ========================================================================== */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url("fonts/open-sans-400.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("fonts/open-sans-700.woff") format("woff");
}
body {
  margin-top: 26px;
  font-size: 16px;
}

/*
   Colors
   ========================================================================== */
/*
   Screen sizes
   ========================================================================== */
/* ==========================================================================
   Mixins
   ========================================================================== */
/*
   Utility mixins
   ========================================================================== */
/* clearfix */
/* Webkit-style focus */
/* Center-align a block level element */
/*
   Typography mixins
   ========================================================================== */
/* Full-fat vertical rhythm */
/* Just the REMs */
/* Just font-size and line-height */
/* Ellipsis */
/*
   Visibility
   ========================================================================== */
/* For image replacement */
/* Hide from visual and speaking browsers */
/* Hide but maintain layout */
/* Hidden but available to speaking browsers */
/* ==========================================================================
   Reset CSS
   Adapted from http://github.com/necolas/normalize.css
   ========================================================================== */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

blockquote {
  margin: 0;
}

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9 ;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

table {
  width: 100%;
}

/* ==========================================================================
   Site utilities
   ========================================================================== */
/* 
   Selection
   ========================================================================== */
::-moz-selection {
  background-color: rgba(200, 200, 200, 0.8);
  color: rgba(34, 34, 34, 0.8);
  text-shadow: none;
}

::selection {
  background-color: rgba(200, 200, 200, 0.8);
  color: rgba(34, 34, 34, 0.8);
  text-shadow: none;
}

/* 
   Global classes
   ========================================================================== */
/* wrapper */
.wrap {
  margin: 0 auto;
}

/* capitalize */
.all-caps {
  text-transform: uppercase;
}

/* float image to the left */
.image-left {
  float: none;
}
@media only screen and (min-width: 48em) {
  .image-left {
    float: left;
  }
}

/* float image to the right */
.image-right {
  float: none;
}
@media only screen and (min-width: 48em) {
  .image-right {
    float: right;
  }
}

/* remove styling from a list element */
.unstyled-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.unstyled-list li {
  list-style-type: none;
}

/* inline a list */
.inline-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.inline-list li {
  list-style-type: none;
  display: inline;
}

/* 
   Global transition
   ========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
  transition: all 0.2s ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
   Body
   ========================================================================== */
body {
  font-family: "Open Sans", "Lato", Calibri, Arial, sans-serif;
  color: rgba(34, 34, 34, 0.8);
}

/*
   Headings
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", "Lato", Calibri, Arial, sans-serif;
}

h1 {
  font-size: 28px;
  font-size: 1.75rem;
}
@media only screen and (min-width: 48em) {
  h1 {
    font-size: 32px;
    font-size: 2rem;
  }
}

/*
   Links
   ========================================================================== */
a {
  text-decoration: none;
  color: rgba(13, 69, 198, 0.8);
}
a:visited {
  color: rgba(70, 122, 243, 0.8);
}
a:hover {
  color: rgba(7, 36, 102, 0.8);
}
a:focus {
  outline: thin dotted;
  color: rgba(7, 36, 102, 0.8);
}
a:hover, a:active {
  outline: 0;
}

/*
   Blockquotes
   ========================================================================== */
blockquote {
  font-family: serif;
  font-style: italic;
  border-left: 8px solid rgba(187, 187, 187, 0.8);
  padding-left: 20px;
}
@media only screen and (min-width: 48em) {
  blockquote {
    margin-left: -28px;
  }
}

/*
   Code
   ========================================================================== */
tt, code, kbd, samp, pre {
  font-family: monospace;
}

p code,
li code {
  line-height: 1.5;
  white-space: nowrap;
  margin: 0 2px;
  padding: 0 5px;
  border: 1px solid #e6e6e6;
  background-color: #f2f2f2;
  border-radius: 3px;
}

pre {
  font-size: 0.9em;
  line-height: 1.5;
  overflow-x: auto;
}
pre::-webkit-scrollbar {
  height: 12px;
  background-color: #34362e;
  border-radius: 0 0 4px 4px;
}
pre::-webkit-scrollbar-thumb:horizontal {
  background-color: #6a6d5d;
  border-radius: 4px;
}

/* ==========================================================================
   Syntax Highlighting
   ========================================================================== */
pre {
  padding: 1em;
  margin-bottom: 1.5em;
  line-height: 1.5;
  color: #d0d0d0;
  color: #525252;
  border: 1px solid #dbdbdb;
  background-color: #272822;
  background-color: #f8f8f8;
  border-radius: 3px;
  position: relative;
  margin: 1em 0;
}

/* ==========================================================================
   Grid
   ========================================================================== */
/* ==========================================================================
   Base Elements and Components
   ========================================================================== */
hr {
  display: block;
  margin: 1em 0;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 20px auto;
}

th, td {
  border-bottom: 1px solid #bbbbbb;
  text-align: left;
  padding: 10px;
}

th {
  background-color: #7887AB;
  color: white;
}

tr:nth-child(odd) {
  background-color: #dddddd;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* ==========================================================================
   Page layout
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #e8e8e8;
}

/*
   Main content
   ========================================================================== */
.entry,
.hentry {
  *zoom: 1;
}
.entry:before, .entry:after,
.hentry:before,
.hentry:after {
  display: table;
  content: "";
  line-height: 0;
}
.entry:after,
.hentry:after {
  clear: both;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, .entry p, .entry li,
.hentry h1,
.hentry h2,
.hentry h3,
.hentry h4,
.hentry h5,
.hentry h6,
.hentry p,
.hentry li {
  word-wrap: break-word;
}

.entry-content {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 48em) {
  .entry-content {
    font-size: 17.6px;
    font-size: 1.1rem;
  }
}
.entry-content p > a,
.entry-content li > a {
  border-bottom: 1px dotted rgba(214, 225, 252, 0.8);
}
.entry-content p > a:hover,
.entry-content li > a:hover {
  border-bottom-style: solid;
}
.entry-content li {
  margin-bottom: 7px;
}
.entry-content .footnotes ol, .entry-content .footnotes li, .entry-content .footnotes p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.8571;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

/*
   Entry header
   ========================================================================== */
.entry-header {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.header-title {
  text-align: center;
  margin: 30px 0 0;
}
.header-title h1 {
  margin: 10px 20px;
  font-weight: 700;
  font-size: 32px;
  font-size: 2rem;
  color: rgba(85, 85, 85, 0.8);
}
@media only screen and (min-width: 48em) {
  .header-title h1 {
    font-size: 36px;
    font-size: 2.25rem;
  }
}
@media only screen and (min-width: 62.5em) {
  .header-title h1 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
.header-title h2 {
  margin: 0;
  font-size: 24px;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: rgba(85, 85, 85, 0.8);
}
@media only screen and (min-width: 48em) {
  .header-title h2 {
    font-size: 28px;
    font-size: 1.75rem;
  }
}
.header-title h3 {
  font-size: 18px;
  font-size: 1.125rem;
}
@media only screen and (min-width: 48em) {
  .header-title h3 {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
.header-title p {
  color: rgba(85, 85, 85, 0.8);
}

.header-title {
  position: absolute;
  top: 0;
  display: table;
  margin-top: 0;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.header-title .header-title-wrap {
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
}
.header-title h1 {
  margin: 10px;
  font-weight: 700;
  margin: 10px 60px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
}
.header-title h1 a {
  color: #fff;
}
.header-title h2 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}
@media only screen and (min-width: 48em) {
  .header-title h2 a {
    color: #fff;
  }
}
.header-title h3 {
  color: #fff;
}
.header-title p {
  color: #fff;
}

.entry-image {
  min-height: 300px;
  background-image: linear-gradient(-90deg, #52ADAA, #A752AD);
}

/*
   Single post and page
   ========================================================================== */
.entry-content {
  margin: 10px 2px 10px 2px;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 0 0 0, 0 6px 12px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
@media only screen and (min-width: 48em) {
  .entry-content {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px 30px;
  }
}
@media only screen and (min-width: 62.5em) {
  .entry-content {
    max-width: 900px;
    margin: 50px auto 30px auto;
    padding: 50px 60px;
  }
  .entry-content > p:first-child {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 26px;
    margin-bottom: 1.625rem;
  }
}

.toc {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: solid 1px #bbb;
}
.toc .toc-title {
  margin: 0 0 16px;
  text-align: center;
  color: #666;
}
.toc ul, .toc li {
  margin: 0;
}
@media only screen and (min-width: 48em) {
  .toc {
    width: 60%;
  }
}

/*# sourceMappingURL=hpstr.css.map */
