/*****************************************************************************/
/*
/* Mixins and globals
/*
/*****************************************************************************/
/*****************************************************************************/
/*
/* Default tag styles
/*
/*****************************************************************************/
/* Global Reset */
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { background-color: #fff; font-family: jubilat, serif; line-height: 1.5em; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 { font-family: "proxima-nova", Helvetica, Arial, sans-serif; line-height: 1; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

h1 { font-size: 1.6em; margin-bottom: 1em; }

h2 { font-size: 1.25em; }

a { color: #c22a09; }
a:hover { color: #000; }

p, ul { margin: 1em 0; }

pre, code { border: 1px solid #ddd; background-color: #eef; font-family: Menlo, Consolas, "Courier New", monospace; font-size: 83%; overflow: scroll; }

pre { padding: 0 .4em; }
pre code { border: none; }
pre.terminal { border: 1px solid #000; background-color: #333; color: #FFF; }
pre.terminal code { background-color: #333; }

code { padding: 0 .2em; }

blockquote { padding-left: 1em; border-left: 4px solid #ddd; color: #777; font-style: italic; }
blockquote i, blockquote em { font-style: normal; }

/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/
.site { box-sizing: border-box; margin: 0 auto 2em; padding: 2em 0 2em; }
.site header { font-family: "proxima-nova", Helvetica, Arial, sans-serif; font-size: 120%; }
.site header h1.title { font-size: inherit; display: inline-block; margin-bottom: 2em; }
.site header a { text-decoration: none; }
.site header nav { display: inline-block; }
.site header nav a { color: #aaa; margin-left: 1em; }
.site header nav a:hover { color: #000; }
.site section.content-body > p:first-child { margin-top: 0; }
.site section.content-body p.intro { text-align: justify; }
.site footer { font-family: "proxima-nova", Helvetica, Arial, sans-serif; font-size: smaller; color: #666; border-top: 4px solid #eee; margin-top: 2em; overflow: hidden; }
.site footer .contact { float: left; margin-right: 3em; }
.site footer .contact + .contact { float: right; margin-right: 0; }
.site footer .contact + .contact p { text-align: right; }
.site footer .contact a { color: #8085C1; }
.site footer span.label { color: #aaa; }
.site footer .rss { margin-top: 1.1em; margin-right: -.2em; float: right; }
.site footer .rss img { border: 0; }

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/
article { margin-top: 1em; }
article ul, article ol { margin-left: 1.35em; }

/*****************************************************************************/
/*
/* Common classes
/*
/*****************************************************************************/
.clear { clear: both; }

span.meta, p.meta { font-family: "proxima-nova", Helvetica, Arial, sans-serif; display: block; color: #aaa; font-size: smaller; }

ul.posts { padding-top: 2em; border-top: 4px solid #eee; list-style-type: none; }

div.pagination { font-family: "proxima-nova", Helvetica, Arial, sans-serif; font-size: smaller; }

/*****************************************************************************/
/*
/* Mobile devices/smaller screens
/*
/*****************************************************************************/
@media only screen and (max-width: 568px) { body { font-size: 100%; }
  .site { padding-left: 1em; padding-right: 1em; }
  .site header h1.title { margin-bottom: 1em; }
  .site header nav { display: block; margin-bottom: 2em; }
  .site header nav a { margin-left: 0; }
  .site header nav a + a { margin-left: 1em; }
  .site footer .contact { margin-right: 1em; }
  .site footer .contact p { margin-bottom: 0; } }
@media only screen and (max-width: 768px) and (min-width: 569px) { body { font-size: 18px; }
  .site { width: 31em; } }
@media only screen and (max-width: 1024px) and (min-width: 769px) { body { font-size: 20px; }
  .site { width: 33em; } }
@media only screen and (min-width: 1025px) { body { font-size: 22px; }
  .site { width: 35em; } }