/* smaller than 980 */
@media screen and (max-width: 980px)  {
    
	#pagewrap  {
    
		width:  95%;
    
	}
	/* header */
	#header  {
    
		margin-bottom:  15px;
    
	}
	/* slider */
	#header-slider  {
    
		padding:  0 35px 0 25px;
    
	}
	#header-slider .slides li  {
    
		margin:  .8em;
    
	}
	#header-slider img  {
    
		max-width:  97%;
    
		height:  auto;
    
	}
	#header-slider .carousel-nav-wrap .carousel-prev {
    
		left:  -26px;
    
	}
	#header-slider .carousel-nav-wrap .carousel-next {
    
		right:  -36px;
    
	}
	#content  {
    
		width:  60%;
    
		padding:  3% 4%;
    
	}
	#sidebar  {
    
		width:  30%;
    
	}
	/* footer grid */
	#footer .col2-1  {
    
		width:  48%;
    
		margin:  1% 2% 1% 0;
    
	}
	#footer .col3-1  {
    
		width:  31.2%;
    
		margin:  1% 2% 2% 0;
    
	}
	#footer .col4-1  {
    
		width:  23%;
    
		margin:  1% 2% 2% 0;
    
	}
	
	/************************************************************************************
	LAYOUTS
	*************************************************************************************/	
	/* grid4 */
	.grid4 .post  {
    
		width:  23%;
    
		margin-left:  2.5%;
    
	}

	/* grid3 */
	.grid3 .post  {
    
		width:  31.2%;
    
		margin-left:  3%;
    
	}
	
	/* grid2 */
	.grid2 .post,  .grid2-thumb .post  {
    
		width:  48.2%;
    
		margin-left:  3.5%;
    
	}

}

/* smaller than 720 */
@media screen and (max-width:  720px)  {
    
	#pagewrap  {
    
		width:  90%;
    
	}
	/* header */
	#header  {
    
		height:  auto !important;
    
	}
	#content  {
    
		width:  auto;
    
		float:  none;
    
		padding:  5%;
    
	}
	/* reset absolute elements to static */
	#header .social-widget,  #header .header-widget,  #site-logo,  #site-description,  #nav-bar   {
    
		position:  static !important;
    
		float:  none;
    
		clear:  both;
    
	}
	/* header */
	#header .social-widget  {
    
		padding:  0 0 30px;
    
	}
	#header #searchform  {
    
		padding:  10px 0;
    
		position:  absolute;
    
		top:  -10px;
    
		right:  0;
    
		z-index:  103;
    
	}
	#header #searchform #s  {
    
		width:  50px;
    
		text-align:  right;
    
	}
	#header #searchform #s: focus  {
    
		width:  150px;
    
	}
	#site-logo  {
    
		margin:  15px 100px 10px 0;
    
	}
	#site-description  {
    
		margin:  0 0 15px;
    
	}
	/* post title */
	.post-title  {
    
		font-size:  150%;
    
		line-height:  120%;
    
		padding-top:  0;
    
	}
	/* commentlist */
	.commentlist ul  {
    
		margin-left:  20px;
    
	}
	.next-prev-comment  {
    
		position:  static;
    
		margin:  0 0 5px;
    
	}
	.commententry  {
    
		clear:  both;
    
	}
	/* sidebar */
	#sidebar  {
    
		width:  100%;
    
	}
	/* footer */
	#footer .col4-1,  #footer .col4-3,  #footer .col3-2,  #footer .col3-1,  #footer .col2-1  {
    
		float:  none;
    
		width:  auto;
    
		margin:  0;
    
	}
	#footer-nav  {
    
		text-align:  center;
    
		padding-top:  10px;
    
		margin-bottom:  0;
    
	}
	#footer .footer-text  {
    
		text-align:  center;
    
		padding-top:  10px;
    
	}
	
	/************************************************************************************
	LAYOUTS
	*************************************************************************************/	
	/* grid4 */
	.grid4 .post,  .sidebar1.grid4 .post  {
    
		width:  auto;
    
		float:  none;
    
		margin-left:  0;
    
	}

	/* grid3 */
	.grid3 .post,  .sidebar1.grid3 .post  {
    
		width:  auto;
    
		float:  none;
    
		margin-left:  0;
    
	}
	
	/* grid2 */
	.grid2 .post,  .grid2-thumb .post,  .sidebar1.grid2 .post,  .sidebar1.grid2-thumb .post  {
    
		width:  auto;
    
		float:  none;
    
		margin-left:  0;
    
	}

}

/* smaller than 560 */
@media screen and (max-width:  560px)  {
    
	html  {
    
    		-webkit-text-size-adjust:  none;
    
	}
	#pagewrap  {
    
		width:  95%;
    
	}
	/* main nav */
	#nav-bar  {
    
		height:  auto;
    
	}
	#main-nav li  {
    
		height:  auto;
    
	}
	#main-nav a  {
    
		font-size:  80%;
    
		padding:  8px;
    
	}
	#header-slider  {
    
		margin-bottom:  10px;
    
	}
	/* post date */
	.post-date  {
    
		width:  44px;
    
	}
	/* post-nav */
	.post-nav span  {
    
		width:  auto;
    
		margin-bottom:  10px;
    
	}
	/* post title */
	.post-title  {
    
		font-size:  140%;
    
		line-height:  130%;
    
	}
}

@media screen and (max-width:  480px)  {
    
	
	/* disable webkit text size adjust (for iPhone) */
	html  {
    
		-webkit-text-size-adjust:  none;
    
	}

	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1, 
	.col4-2,  .col2-1, 
	.col4-3, 
	.col3-1, 
	.col3-2	  {
    
		margin-left:  0 !important;
    
		width:  100% !important;
    
		max-width:  100% !important;
    
	}
	
	/************************************************************************************
	POST
	*************************************************************************************/
	/* post */
	.post  {
    
		width:  auto !important;
    
		max-width:  100% !important;
    
		margin-left:  0 !important;
    
		float:  none !important;
    
	}
	
	/************************************************************************************
	MOBILE NAV BUTTON
	*************************************************************************************/
	.mobile-button  {
    
		position:  relative;
    
		width:  32px;
    
		height:  30px;
    
		margin-bottom:  3px;
    
		margin-right:  3px;
    
		display:  block;
    
		float:  right;
    
		cursor:  pointer;
    
	}
	.mobile-button: after  {
    
		border:  solid 1px #7a7a7a;
    
		padding:  1px;
    
		padding: 0 \0;
     /* IE8 fix */
		content:  "";
    
		width:  100%;
    
		height:  100%;
    
		position:  absolute;
    
		top:  -1px;
    
		left:  -1px;
    
		z-index:  -1;
    
		
		background-color:  #c3c3c3;
    
		background-color:  transparent \0;
     /* IE8 fix */

		background-image:  url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjM1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    
		background-image:  -moz-linear-gradient(top,   rgba(255, 255, 255, 0.35) 0%,  rgba(0, 0, 0, 0.1) 100%);
    
		background-image:  -webkit-linear-gradient(top,   rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
    
		background-image:  linear-gradient(to bottom,   rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
    
		
		box-shadow:  inset 0 0 1px rgba(255, 255, 255, .4),  inset 0 1px rgba(255, 255, 255, .5),  0 1px 2px rgba(0, 0, 0, .2);
    
		
		border-radius:  5px;
    
	}
	#menu-icon, 
	#search-icon  {
    
		background-color: #c3c3c3 \9 !important;
     /* IE fix */
	}

	/************************************************************************************
	MAIN NAV (MOBILE)
	*************************************************************************************/
	#main-nav-wrap  {
    
		position:  absolute;
    
		top:  0px;
    
		right:  0;
    
		z-index:  1000;
    
	}
	
	/* menu icon */
	#menu-icon  {
    
		background:  url(images/menu-icon.png) no-repeat center center;
    
	}
	
	/* main nav */
	#main-nav  {
    
		clear:  both;
    
		position:  static;
    
		width:  160px;
    
		z-index:  1000;
    
		padding:  10px 5px;
    
		background:  #fff !important;
    
		border:  solid 1px #999 !important;
    
		display:  none;
     /* visibility will be toggled with jquery */
		box-shadow:  1px 2px 0 rgba(0, 0, 0, .2);
    
		border-radius:  5px;
    
	}
	#main-nav li  {
    
		clear:  both;
    
		float:  none;
    
		margin:  5px 0 5px 10px !important;
    
		padding:  0 !important;
    
		border:  none !important;
    

		box-shadow:  none !important;
    
	}
	#nav-bar, 
	#main-nav a,  
	#main-nav ul a  {
    
		font:  inherit !important;
    
		text-transform:  inherit !important;
    
		background:  none !important;
    
		width:  auto !important;
    
		display:  inline !important;
    
		padding:  0 !important;
    
		color:  #666 !important;
    
		border:  none !important;
    
		text-shadow:  none !important;
    
		box-shadow:  none !important;
    
	}
	#nav-bar a: hover, 
	#nav-bar ul a:hover, 
	#nav-bar li:hover, 
	#main-nav a:hover,  
	#main-nav ul a:hover  {
    
		background:  none !important;
    
		color:  #000 !important;
    
	}
	#main-nav .current_page_item {
    
		background: none;
    
	}
	/* dropdown */
	#main-nav ul  {
    
		position:  static;
    
		display:  block;
    
		margin:  0;
    
		padding:  0;
    
		background:  none;
    
		border:  none;
    
		
		border-radius:  0;
    
		
		box-shadow:  none;
    
	}
	
	/************************************************************************************
	SEARCH FORM
	*************************************************************************************/
	#searchform-wrap  {
    
		position:  absolute;
    
		top:  0px;
    
		right:  40px;
    
		z-index:  1000;
    
	}
	#search-icon  {
    
		background:  url(images/search-icon.png) no-repeat center center;
    
	}
	
	#header #searchform  {
    
		clear:  both;
    
		width:  auto;
    
		width:  165px \0;
    
		position:  static;
    
		overflow:  hidden;
    
		background:  #fff;
    
		border:  solid 1px #999;
    
		padding:  5px;
    
		display:  none;
     /* visibility will be toggled with jquery */
		border-radius:  5px;
    
		box-shadow:  0 1px 2px rgba(0, 0, 0, .3);
    
	}
	#header #searchform #s  {
    
		background:  #ddd !important;
    
		color:  #444 !important;
    
		padding-left:  8px;
    
		width:  110px \0;
    
	}
	
	/************************************************************************************
	WOOCOMMERCE SUPPORT
	*************************************************************************************/
	.woocommerce #content div.product div.images, 
	.woocommerce #content div.product div.summary  {
    
		float:  none !important;
    
		width:  100% !important;
    
	}
}

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

	/* ensure #nav and #searchform is visible on desktop version */
	#main-nav, 
	#headerwrap #searchform  {
    
		display:  block !important;
    
	}
}