/*
 *                        ___
 *                       /\_ \
 *  _____     ___     ___\//\ \      __
 * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
 * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
 *  \ \ ,__/\ \____/\ \____//\____\ \____\
 *   \ \ \/  \/___/  \/___/ \/____/\/____/
 *    \ \_\
 *     \/_/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/poole.
 */


/*
 * Contents
 *
 * Body resets
 * Custom type
 * Messages
 * Container
 * Masthead
 * Posts and pages
 * Pagination
 * Reverse layout
 * Themes
 */


/*
 * Body resets
 *
 * Update the foundational and global aspects of the page.
 */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 760px) {
  html {
    font-size: 20px;
  }
}

body {
  color: #515151;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

/* No `:visited` state is required by default (browsers will use `a`) */
a {
  color: #268bd2;
  text-decoration: none;
}
/* `:focus` is linked to `:hover` for basic accessibility */
a:hover,
a:focus {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.25;
  color: #0e5f80;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 40px;
}
h2 {
  margin-top: 20px;
  font-size: 30px;
}
h3 {
  margin-top: 30px;
  font-size: 25px;
}
h4, h5, h6 {
  margin-top: 20px;
  font-size: 20px;
}

/* Body text */
p {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: justify;
}

@media (max-width: 800px) {
  p {
    text-align: left;
  }
}

strong {
  color: #303030;
}


/* Lists */
ul, ol, dl {
  margin-top: 0;
  margin-bottom: 20px;
}

dt {
  font-weight: bold;
}
dd {
  margin-bottom: 10px;
}

/* Misc */
hr {
  position: relative;
  margin: 30px 0px;
  border: 0px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

abbr {
  font-size: 85%;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
}
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #e5e5e5;
}

/* Code */
code, pre {
  font-family: "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  font-weight: bold;
  opacity: 0.9;
}
code {
  padding-left: 2px;
  padding-right: 2px;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 20px;
  padding: 20px;
  font-size: 16px;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}
pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}
.highlight {
  margin-bottom: 20px;
  border-radius: 4px;
}
.highlight pre {
  margin-bottom: 0;
}

/* Quotes */
blockquote {
  padding: 10px 20px;
  margin: 16px 0px;
  color: #7a7a7a;
  border-left: 5px solid #e5e5e5;
}
blockquote p:last-child {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  blockquote {
    padding-right: 100px;
    padding-left: 25px;
  }
}

img {
  display: block;
  margin: 0px 0px 20px;
  border-radius: 5px;
  max-width: 100%;
}

/* Tables */
table {
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
}
td,
th {
  padding: 5px 10px;
  border: 1px solid #e5e5e5;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}


/*
 * Custom type
 *
 * Extend paragraphs with `.lead` for larger introductory text.
 */

.lead {
  font-size: 25px;
  font-weight: 300;
}


/*
 * Messages
 *
 * Show alert messages to users. You may add it to single elements like a `<p>`,
 * or to a parent if there are multiple elements to show.
 */

.message {
  margin-bottom: 20px;
  padding: 20px;
  color: #717171;
  background-color: #f9f9f9;
}


/*
 * Container
 *
 * Center the page content.
 */

.container {
  max-width: 760px;
  padding-left:  20px;
  padding-right: 20px;
  margin-left:  auto;
  margin-right: auto;
}


/*
 * Masthead
 *
 * Super small header above the content for site name and short description.
 */

.masthead {
  padding-top:    20px;
  padding-bottom: 20px;
  margin-bottom: 60px;
}
.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
}
.masthead-title a {
  color: #505050;
}
.masthead-title small {
  font-size: 75%;
  font-weight: 400;
  color: #c0c0c0;
  letter-spacing: 0;
}


/*
 * Posts and pages
 *
 * Each post is wrapped in `.post` and is used on default and post layouts. Each
 * page is wrapped in `.page` and is only used on the page layout.
 */

.page,
.post {
  margin-bottom: 300px;
}

/* Blog post or page title */
.page-title,
.post-title,
.post-title a {
  color: #0e5f80;
  font-family: Cardo, serif;
  font-style: italic;
  font-size: 60px;
  line-height: 100%;
}
.page-title,
.post-title {
  margin-top: 0;
}

/* Meta data line below post title */
.post-date {
  display: block;
  margin-top: -10px;
  margin-bottom: 20px;
  color: #9a9a9a;
}

/* Related posts */
.related {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid #eee;
}
.related-posts {
  padding-left: 0;
  list-style: none;
}
.related-posts h3 {
  margin-top: 0;
}
.related-posts li small {
  font-size: 75%;
  color: #999;
}
.related-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.related-posts li a:hover small {
  color: inherit;
}


/*
 * Pagination
 *
 * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 * there are no more previous or next posts to show.
 */

.pagination {
  overflow: hidden; /* clearfix */
  margin-left: -20px;
  margin-right: -20px;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  color: #ccc;
  text-align: center;
}

/* Pagination items can be `span`s or `a`s */
.pagination-item {
  display: block;
  padding: 20px;
  border: 1px solid #eee;
}
.pagination-item:first-child {
  margin-bottom: -1px;
}

/* Only provide a hover state for linked pagination items */
a.pagination-item:hover {
  background-color: #f5f5f5;
}

@media (min-width: 600px) {
  .pagination {
    margin: 60px 0px;
  }
  .pagination-item {
    float: left;
    width: 50%;
  }
  .pagination-item:first-child {
    margin-bottom: 0;
    border-top-left-radius:    4px;
    border-bottom-left-radius: 4px;
  }
  .pagination-item:last-child {
    margin-left: -1px;
    border-top-right-radius:    4px;
    border-bottom-right-radius: 4px;
  }
}