/* 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 60px "Open Sans", sans-serif;

		letter-spacing: -4px;	

	} 



}

	img.pull-left {max-width: 300px}



/* 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 60px;	

		background-size: 330px 234px;

	}	

	header h1#logo-text a {	 		

		font: normal 60px "Open Sans", sans-serif;

	} 

	header p#intro {			

		font: 15px/24px 'opensans-light', sans-serif;		

		top: 183px; 

		left: 21px;		

	}   



}



/* screenwidth less than 768px - mobile/smaller tablets

---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {


	.pic {clear: both;padding-top: 20px}


	/* header styles 

	-------------------------------------------------------------- */

	header,

	header .header-content { 

		height: 276px;      

	}

	header .header-content {

	background-image: 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 "Open Sans", sans-serif;	

		letter-spacing: -3.5px;	

	} 

	header p#intro {			

		font: 15px/24px 'opensans-light', sans-serif;		

	}

	

   /* mobile navigation

   -------------------------------------------------------------------- */

   #nav-wrap {

      z-index: 999; 

      float: none;     

      position: absolute;

      top: 0;

      right: 0;

      border-top: 6px solid #7fc5dd; 

   }

   #nav-wrap > a {

	   font-family: 'FontAwesome';	   

      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: #79BCD3;

		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,

	.compass h2;

	.entry h2 a {

		font: 26px/31px 'opensans-semibold', sans-serif;	

		letter-spacing: -.5px;

	}



	.entry h2,

	.entry .entry-meta,

	.page h2 {

		text-align: left;

	}





	/* 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 "Open Sans", sans-serif; } 

	header p#intro { font: 14px/24px 'opensans-light', sans-serif; }	header,

	header .header-content { 

		background-image: none   

	}



	/* mobile navigation

   --------------------------------------------------------------- */

	#nav-wrap > a { right: 30px; }  

   #nav-wrap { width: 100%; }

   #nav-wrap ul#nav { width: 100%; }         


	.pic {clear: both}


}



/* screenwidth less than or equal 420px - mobile narrow

  -------------------------------------------------------------------------- */

@media only screen and (max-width: 320px) { 



	/* header styles 

	-------------------------------------------------------------- */

	header,

	header .header-content { 

		height: 260px;   

		background-image: none   

	}

	header .header-content {

		background: none;	

		background-size: 300px 213px;

	}

   header h1#logo-text a {	 		

		font: normal 46px "Open Sans", sans-serif;		

	} 

	header p#intro {			

		font: 13px/24px 'opensans-light', sans-serif; 			

	}



	/* content 

	-------------------------------------------------------------- */

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


	.pic {clear: both}


} 


/* make sure the menu is visible on larger screens

  -------------------------------------------------------------------------- */



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

   

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



}