/* Styles for Heather - A Hyperminimal Jekyll Theme */

/* BASSCSS Reset - http://jxnblk.github.io/basscss */
body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p,
button, input, select, textarea {
  margin: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

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


body {
  color: #333;
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Merriweather', serif;
}
h1 { margin-top: 0.3em }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
h1, .h1 {
  font-size: 2em;
  margin-bottom: 0.4em;
}
h2, .h2, h3, .h3, h4, h5, h6 { 
  font-size: 1.5em;
  margin-bottom: 0.4em;
}
p, .p {
  font-size: 1em;
  margin-bottom: 0.8em;
}
small, .small { font-size: 0.7em; }

figure.legacy {margin-left: 1em; margin-right: 1em}
figure figcaption { margin-left: 0.7em; font-size: 0.5em}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  width: 100%;
  margin: 0px auto;
  border-bottom: 1px solid #f6f6f6;
  background-color: rgba(255, 255, 255, 0.7);
}



a { color: #09c; text-decoration: none; }
a:hover { color: #069; }
h1 a { color: #333;}

.wrap {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  padding: 32px 5% 64px 5%;
}

.m-0 { margin-top: 0; margin-bottom: 0; }
.mb { max-width: 90%; margin-bottom: 3em; }

.post { margin-bottom: 96px; }
.post img { max-width: 100%; }

.center { text-align: center; }
.fl { float: left; }
.fr { float: right; }

.gray { color: #999; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}

header > span {
  display: inline-block;
  margin: auto;
}

header > span > ul > li {
  display: inline-block;
}

#left-nav {
  margin-left: 32%
}
#main-navspan{
  margin-left: 2em;
  margin-right: 2em;
}
#right-nav{
  margin: auto;
}

#left-nav > ul {
}

#right-nav > ul {
  margin: auto
}

.head-about {
  margin-bottom: 0px;
}

#main-navspan > div {
  margin: auto
}

@font-face {
  font-family: 'jackmcd-icons';
  src: url("/fonts/jackmcd-icons.eot?35756236");
  src: url("/fonts/jackmcd-icons.eot?35756236#iefix") format("embedded-opentype"), url("/fonts/jackmcd-icons.woff?35756236") format("woff"), url("/fonts/jackmcd-icons.ttf?35756236") format("truetype"), url("/fonts/jackmcd-icons.svg?35756236#jackmcd-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'jackmcd-icons';
    src: url('../font/jackmcd-icons.svg?35756236#jackmcd-icons') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "jackmcd-icons";
  font-size: 1.25em;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}


/*
  .icon-menu:before {
  content: '\e800';
} 
*/

/* '' */
.icon-mail-alt:before {
  content: '\e801';
}

/* '' */
.icon-twitter:before {
  content: '\e802';
}

.octo-octocon:before {
  content: '&#f00a';
}

#right-nav .menu-link {
  color: #999;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
#right-nav .menu-link + .menu-link {
  margin-left: 0.8em;
}
#right-nav .menu-link:hover {
  border-color: #fff;
  color: #000;
}

@media screen and (max-width: 1920px) {
  #left-nav {margin-left: 31%} ; 
}

@media screen and (max-width: 1675px) {
  #left-nav {margin-left: 28%} ; 
}

@media screen and (max-width: 1460px) {
  #left-nav {margin-left: 24%} ; 
}

@media screen and (max-width: 1375px) {
  #left-nav {margin-left: 22%} ; 
}

@media screen and (max-width: 1300px) {
  #left-nav {margin-left: 20%} ;  
}

@media screen and (max-width: 1100px) {
  #left-nav {margin-left: 14%} ;  
}

@media screen and (max-width: 975px) {
  #left-nav {margin-left: 10%} ;  
}

@media screen and (max-width: 900px) {
  #left-nav {margin-left: 6%} ;  
}

@media screen and (max-width: 850px) {
  #left-nav {margin-left: 2%} ;  
}

@media screen and (min-width: 800px) {
  h1, .h1 { font-size: 2em; }
  h2, .h2 { font-size: 2em; }
  p, .p   { font-size: 1em; }
}

@media screen and (max-width: 720px) {
  #left-nav {margin-left: 0%} ;
  #main-navspan { margin-left: 0em; margin-right: 0.2em; }
}

@media screen and (max-width: 710px) {
  header .h2 { font-size: 1.4em; 
    }
  #left-nav, #right-nav {
    font-size: 1em;
  }
  .left-head { font-size: 0.7em }
  .icon {font-size: 0.7em}
  
  }

@media screen and (max-width: 590px) {
  header .h2 { font-size: 1em; 
    margin-left: 0px;
    margin-right: 0px;}
  #left-nav, #right-nav {
    font-size: 0.7em;
  }
  .left-head { font-size: 0.5em }
  .icon {font-size: 0.5em}
  
  }

@media screen and (max-width: 475px){
  #left-nav {margin-left:-3em; margin-right: 0.5em}
  #main-navspan { margin-left: 0em; margin-right: 0.5em; }
}