/* 
=====================================================================
*   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 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 Georgia, Serif;		
	} 
	header p#intro {			
		font: 15px/24px 'opensans-light', Georgia, Serif;		
		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 Georgia, Serif;	
		letter-spacing: -3.5px;	
	} 
	header p#intro {			
		font: 15px/24px 'opensans-light', Georgia, Serif;			
	}
	
   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      z-index: 999; 
      float: none;     
      position: absolute;
      top: 0;
      right: 0;
      border-top: 6px solid #9FCC7F; 
   }
   #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: #9FCC7F;
		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 'opensans-semibold', 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 Georgia, Serif; } 
	header p#intro { font: 14px/24px 'opensans-light', Georgia, Serif; }

	/* 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 Georgia, Serif;		
	} 
	header p#intro {			
		font: 13px/24px 'opensans-light', Georgia, Serif;			
	}

	/* 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; }

}