/*
=====================================================================
*   Keep It Simple Media Queries
*   url: styleshout.com
*   07-12-2014
/* ================================================================== */


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

	/* header styles
	-------------------------------------------------------------- */
	header h1#logo-text {
		top: 114px;
		left: 18px;
	}
	header h1#logo-text a {
		font: normal 68px 'klartextmono-light', Georgia, Serif;
		letter-spacing: -4px;
	}

	/* sidebar
	-------------------------------------------------------------- */
   #sidebar { padding-left: 18px; }

}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

	/* header styles
	-------------------------------------------------------------- */
	header .header-content {
/*
		background: #fff url(img/header-content-bg.png) no-repeat right top;
*/
		background-size: 330px 234px;
	}
	header h1#logo-text a {
		font: normal 60px 'klartextmono-light', monospace;
	}
	header p#intro {
		font: 13px/24px 'ia_writer_duospaceregular', monospace;
		top: 183px;
		left: 30px;
	}

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* header styles
	-------------------------------------------------------------- */
	header,
	header .header-content {
		height: 276px;
	}
	header .header-content {
/*
		background: #fff url(img/header-content-bg.png) no-repeat 50% top;
*/
		padding: 0;
		border: none;
	}
	header h1#logo-text,
	header p#intro {
		width: 100%;
		text-align: center;
		position: static;
	}
	header h1#logo-text { padding-top: 108px;	}
	header h1#logo-text a {
		font: normal 56px 'klartextmono-light', monospace;
		letter-spacing: -3.5px;
	}
	header p#intro {
		font: 13px/24px 'ia_writer_duospaceregular', mono;
	}

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      z-index: 999;
      float: none;
      position: absolute;
      top: 0;
      right: 0;
      border-top: 6px solid var(--accent-color);
   }
   #nav-wrap > a {
      text-align: left;
		border: none;
      font-size: 12px;
      height: 54px;
      line-height: 54px;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;

		float: right;
      position: relative;
      top: 0px;
      right: 36px;
   }
	#nav-wrap  > a:before {
	   font-family: 'FontAwesome';
      content: "\f0c9";
      color: #666666;
      margin: 0;
      font-size: 25px;
      line-height: 54px;
      text-align: left;
      display: block;
      float: right;
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 12px 30px 60px 30px;
      margin: 0;
      height: auto;
      display: none;
      clear: both;
      /*width: auto; */
      width: 100%;

      float: none;
      position: relative;
      top: 0;
      right: 0;
   }

   /* display toggle buttons */
	.no-js #nav-wrap:not( :target ) > a:first-of-type,
	.no-js #nav-wrap:target  > a:last-of-type  {
	   display: block;
	}
   .js #nav-wrap a { display: block; }

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target ul#nav  {
      display: block;
   }

	/* remove float left on 1st level list items */
	ul#nav > li { float: none; }

   ul#nav > li {
      display: block;
      height: auto;
      text-align: left;
      border-bottom: 1px dotted #D3D5DA;
      padding: 6px 0;
   }
   ul#nav > li:first-child {
		border-top: 1px dotted #D3D5DA;
   }

   ul#nav li a {
      display: block;
      width: auto;
      padding: 0;
      padding: 12px 0;
      line-height: 16px; /* reset line-height from 40px */
      border: none;
   }
   ul#nav li.current > a {
   	background: none;
   	border-radius: none;
   	border: none;
   	padding: 12px 0;
   	color: #111;
   }

   ul#nav li.has-children > a:after {
		content: "+";
		display: inline;
		padding-left: 8px;
		color: var(--accent-color);
		font-weight: bold;
		font-size: 18px;

		position: absolute;
		right: 10px;
		top: 15px;
	}

   /* sub menu	 */
	ul#nav ul {
		position: static; /* change position to static */
		border-radius: none;
		border: none;
		padding-bottom: 0;
	}

	/* sub menu anchor links */
	ul#nav ul li a { padding: 6px 15px 6px 8px; }

	/* on hover */
	ul#nav li.has-children:hover > a:after { content: "-"; }

	/* content
	-------------------------------------------------------------- */
	#content-wrap { padding-top: 0; }
	#content-wrap  #main { padding-right: 30px;}

	.page h2,
	.entry h2,
	.entry h2 a {
		font: 28px/36px 'Inconsolata', sans-serif;
		letter-spacing: -.5px;
	}

	.entry h2,
	.entry .entry-meta,
	.page h2 {
		text-align: center;
	}

	/* sidebar
	-------------------------------------------------------------- */
	#sidebar { padding-left: 30px; }

	/* categories */
	#sidebar .widget_categories ul {	margin-bottom: 12px;	}
	#sidebar .widget_categories ul li {
		display: inline-block;
		margin-right: 6px;
	}

	/* entry
	-------------------------------------------------------------- */
	.entry .entry-meta ul { margin-top: 9px; }
	.entry .entry-meta ul li { }

	/* tags */
	.tags { text-align: center; }

	/* post-nav */
   .post-nav { margin-top: 18px; }
   .post-nav li {
      display: block;
      margin: 0 0 18px 0;
      width: 100%;
   }
   .post-nav li.next {
      float: none;
      text-align: center;
   }
   .post-nav li.prev {
      float: none;
      text-align: center;
   }

   /* Comments */
   #comments h3 {
      text-align: center;
      margin-left: 0;
   }

   /* Comments List */
   ol.commentlist {
      width: 100%;
      margin-left: 0;
   }
   .commentlist > li { padding-left: 0; }
   .commentlist  li .avatar { display: none; }

   /* comment form */
   #comments form {
   	margin-left: 0;
		border-bottom: 1px solid #E8E8E8;
   }
   #comments form input,
   #comments form textarea,
   #comments form select,
   #comments form label {
      width: 100%;
      float: none;
   }
   #comments form label { padding-left: 0; }
   #comments form div { margin-bottom: 0; }
   #comments form input { margin-bottom: 0; }
   #comments form .message label { display: block; }
   #comments form button.submit { width: 100%; }

   /* page navigation */
   .pagenav { text-align: center; }


	/* page
	-------------------------------------------------------------- */
   .page { border-bottom: 1px solid #E8E8E8; }


	/* footer
	-------------------------------------------------------------- */
	footer .social-links { margin-bottom: 36px; }
	footer .social-links li {
		font-size: 28px;
		line-height: 42px;
		margin: 0 8px;
	}
	footer .navigate { margin-bottom: 30px; }
	footer .navigate li {
		display: inline-block;
		margin-right: 18px;
		line-height: 30px;
	}
	footer .copyright {
		border-top: 1px solid #DFDBDB;
		padding: 24px 30px 6px 30px;
	}

 	/* Go To Top Button */
	#go-top { right: 20px; }
	#go-top a {
		width: 42px;
		height: 42px;
		line-height: 42px;
	}

}


/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

	/* header styles
	-------------------------------------------------------------- */
	header h1#logo-text { padding-top: 105px;	}
	header h1#logo-text a {	font: normal 52px 'klartextmono-light', monospace; }
	header p#intro { font: 12px/24px 'ia_writer_duospaceregular', monospace; }

	/* mobile navigation
   --------------------------------------------------------------- */
	#nav-wrap > a { right: 30px; }
   #nav-wrap { width: 100%; }
   #nav-wrap ul#nav { width: 100%; }

}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) {

	/* header styles
	-------------------------------------------------------------- */
	header,
	header .header-content {
		height: 260px;
	}
	header .header-content {
/*
		background: #fff url(img/header-content-bg.png) no-repeat 50% top;
*/
		background-size: 300px 213px;
	}
   header h1#logo-text a {
		font: normal 46px 'klartextmono-light', Georgia, Serif;
	}
	header p#intro {
		font: 13px/24px 'ia_writer_duospaceregular', monospace;
	}

	/* content
	-------------------------------------------------------------- */
	#content-wrap { margin-top: -24px; }

}

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

   #nav-wrap ul#nav { display: block !important; }

}