/* Responsive Rules */

@media screen and ( max-width:960px ){
	#mainFoot{ background: url(images/ftSm.png) bottom center no-repeat;
	height: auto; 
	margin: 0 auto;
	padding: 0 0 100px;
	width: 90%;
	}
}

@media screen and (max-width:768px) {
	.sb-toggle-left{ display: block; }
	#mainHd img{ margin-bottom: 10px; }
	#mainHd .socialIcons, #mainHd .acctLinks, #mainHd #menu-primary-menu{ display: none; }
	.ftBox{ float: none; position: static; max-width: 300px; width: 100%; }
	#ftSocial{ left: auto; margin: 0 auto 20px; }
	#newsletterSignup{ right: auto; margin: 0 auto; }
	
	#homeProducts h2{  background: url(images/bannerNewShopSm.png) top left no-repeat;
		height: 46px;
		margin: 0 0 0 -125px;
		width: 250px;
	}
	#newBlog h2.sectionTitle{ background: url(images/bannerBlogSm.png) top left no-repeat;
		height: 53px;
		margin: 0 0 0 -111px;
		width: 222px;
	}
	#newTut h2.sectionTitle{ background: url(images/bannerTutSm.png) top left no-repeat;
		height: 49px;
		margin: 0 0 0 -111px;
		width: 222px;
	}
	#homeProducts .product.whitebox{ margin-top: 20px; }
	#homeProducts .product.whitebox, #homeProducts .product.whitebox:nth-child(4n+1){ margin: 15px 4% 10px 0; max-width: 350px; width: 48%; }
	#homeProducts .product.whitebox:nth-child(odd){ margin-right: 0; }
	#newBlog article.post, #newTut article.post{ margin-top: 25px; }
	
	#main #container .products li.product{
		margin: 0 2% 15px 0;
		width: 48%;
	}
	
	.post .postmeta p.cat, .post .postmeta .socialSharing{ box-sizing: border-box; float: none; margin: 0 auto; padding: 10px 15px 10px; text-align: center; width: 100%; }
	.post .postmeta .socialSharing{ text-align: left; width: 150px; }
	#respondBox .entry .inputBoxes, #respondBox .entry .textBox{ float: none; width: 100%; padding: 0; }
}

@media screen and (max-width: 650px) {
	
	#wrapper{ width: 96%; }
	#main{ float: none; margin: 0 auto 30px; width: 90%; }
	#container{ margin: 0; }
	.sidebar{ clear: both; float: none; margin: 0 auto; width: 280px; }
	
	.cart_table{ font-size: 12px; }
	.cart_table td.product-thumbnail img{ display: none; }
}

@media screen and (max-width:550px) {
	
	#ftSocial.ftBox, #newsletterSignup.ftBox{ float: none; margin: 0 auto 20px; width: 100%; max-width: 300px; }
	
	#homeProducts{ padding-top: 15px; }
	#homeProducts .product.whitebox, #homeProducts .product.whitebox:nth-child(4n+1), 	#homeProducts .product.whitebox:nth-child(odd){ float: none; margin: 15px auto 0; max-width: 350px; width: 100%; }
	#newBlog, #newTut{ float: none; margin: 0; width: 100%; }
	#newBlog article.post, #newTut article.post{ margin: 15px auto 0; }
	
	.post .postmeta p.cat{ font-size: 16px; line-height: 18px; width: 50%; }
	
	.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images{ float: none; margin: 0 auto; width: 100%; }
	.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary{ float: none; margin: 0 auto; width: 100%; }
	
	.cart_table .coupon, .cart_table .cart_buttons{ float: none; width: 100%; }
	.cart_table .cart_buttons{ margin-bottom: 10px; }
	.cart_table .cart_buttons input{ width: 100%; }
}

@media screen and (max-width:480px) {
	#ftSocial{ display: none; }
	#main #container .products li.product{
		float: none;
		margin: 0 auto 15px;
		width: 100%;
	}
	

}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
	
	.post:nth-child .postmeta, #newBlog .postmeta{ background: url(images/blue@2x.gif) repeat; 
		-webkit-background-size: 24px 25px; 
		-moz-background-size: 24px 25px; 
		-o-background-size: 24px 25px;
		background-size: 24px 25px;
	}
	.post:nth-child(3n) .postmeta, .red h3, #newTut .postmeta, .related.products h2{ background: url(images/red@2x.gif) repeat; 
		-webkit-background-size: 24px 9px; 
		-moz-background-size: 24px 9px; 
		-o-background-size: 24px 9px;
		background-size: 24px 9px;
	}
	.post:nth-child(3n-1) .postmeta, .green h3{ background: url(images/green@2x.gif) repeat; 
		-webkit-background-size: 197px 48px; 
		-moz-background-size: 197px 48px; 
		-o-background-size: 197px 48px;
		background-size: 197px 48px;
	}
	.socialIcons ul li.fbLink a{ background-image: url(images/iconFB@2x.png); 
		-webkit-background-size: 25px 50px; 
		-moz-background-size: 25px 50px; 
		-o-background-size: 25px 50px;
		background-size: 25px 50px;
	}
	.socialIcons ul li.twitterLink a{ background-image: url(images/iconTwitter@2x.png);  
		-webkit-background-size: 25px 50px; 
		-moz-background-size: 25px 50px; 
		-o-background-size: 25px 50px;
		background-size: 25px 50px;
	}
	.socialIcons ul li.pinLink a{ background-image: url(images/iconPin@2x.png);  
		-webkit-background-size: 25px 50px; 
		-moz-background-size: 25px 50px; 
		-o-background-size: 25px 50px;
		background-size: 25px 50px;
	}
	.socialIcons ul li.etsyLink a{ background-image: url(images/iconEtsy@2x.png);  
		-webkit-background-size: 25px 50px; 
		-moz-background-size: 25px 50px; 
		-o-background-size: 25px 50px;
		background-size: 25px 50px;
	}
	.socialIcons ul li.rssLink a{ background-image: url(images/iconRSS@2x.png);  
		-webkit-background-size: 25px 50px; 
		-moz-background-size: 25px 50px; 
		-o-background-size: 25px 50px;
		background-size: 25px 50px;
	}
	.sidebar ul li h2{ background: url(images/blueTag@2x.png) top left no-repeat;  
		-webkit-background-size: 270px 68px; 
		-moz-background-size: 270px 68px; 
		-o-background-size: 270px 68px;
		background-size: 270px 68px;
	}
	.sidebar ul li:nth-child(4n-2) h2{ background: url(images/greenTag@2x.png) top left no-repeat;  
		-webkit-background-size: 270px 70px; 
		-moz-background-size: 270px 70px; 
		-o-background-size: 270px 70px;
		background-size: 270px 70px;
	}
	.sidebar ul li:nth-child(4n-1) h2{ background: url(images/yellowTag@2x.png) top left no-repeat;  
		-webkit-background-size: 270px 67px; 
		-moz-background-size: 270px 67px; 
		-o-background-size: 270px 67px;
		background-size: 270px 67px;
	}
	.sidebar ul li:nth-child(4n) h2{ background: url(images/redTag@2x.png) top left no-repeat;  
		-webkit-background-size: 270px 78px; 
		-moz-background-size: 270px 78px; 
		-o-background-size: 270px 78px;
		background-size: 270px 78px;
	}
	#homeProducts h2{  background: url(images/bannerNewShopSm@2x.png) top left no-repeat;  
		-webkit-background-size: 250px 46px; 
		-moz-background-size: 250px 46px; 
		-o-background-size: 250px 46px;
		background-size: 250px 46px;
	}
	#newBlog h2.sectionTitle{ background: url(images/bannerBlogSm@2x.png) top left no-repeat;  
		-webkit-background-size: 222px 53px; 
		-moz-background-size: 222px 53px; 
		-o-background-size: 222px 53px;
		background-size: 222px 53px;
	}
	#newTut h2.sectionTitle{ background: url(images/bannerTutSm@2x.png) top left no-repeat;  
		-webkit-background-size: 222px 49px; 
		-moz-background-size: 222px 49px; 
		-o-background-size: 222px 49px;
		background-size: 222px 49px;
	}
}