/*

	Author: 				CrystalCommerce Team
	Website: 				CrystalCommerce.com
	
	This file contains any additional responsive 
	styles you may need to add to allow your website 
	to flow more smoothly across more device.

*/


/* ==============================================================================
/* ====== SMALL (MIN WIDTH ONLY - 320px) PRIMARY MOBILE ELEMENTS & STYLES
/* ============================================================================= */

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

	/* ====================================================
	/* ===== START SHOW & HIDE YOUR ELEMENTS HERE
	/* =================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE 
	/* ================================================== */

	
	.brand-container { margin: 0 auto; }
	
	.grid-container { padding: 0 10px; }
	
	.large-block-grid-4 > .grid-item {
		margin:0 0 20px;
		width:100%;
	}

	/*
.large-block-grid-4 > .grid-item:nth-child(4n+4) {
		margin-right: 0;
	}
*/
	
	.grid-item {
		display:block;
		float:left;

	}

	@media (max-width: 480px) {

		.large-block-grid-4 > .grid-item {
			margin:0 0 20px;
			width:100%;
		}

		.large-block-grid-4 > .grid-item:nth-child(4n+4) {
			margin-right: 0;
		}
		
		.grid-item {
			display:block;
			float:left;

		}

	}


}



/* ==============================================================================
/* ====== SMALL (MIN 320px - 767px MAX) MOBILE SPECIFIC ELEMENTS & STYLES
/* ============================================================================ */

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

	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE 
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE 
	/* ================================================== */

	.logo, .page-title {
		text-align: center; 
	}
	
	.store-address-container, .store-hours-container, .news-signup-container { margin-bottom: 20px; }


	.add-to-wishlist { width: 100%; }

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

		.large-block-grid-4 > .grid-item {
			margin:0 4% 20px 0;
			width:48%;
		}

		.large-block-grid-4 > .grid-item:nth-child(2n+2) {
			margin-right:0;
		}

	}

	@media (min-width: 620px) and (max-width: 767px) {

		.large-block-grid-4 > .grid-item {
			margin:0 3% 20px 0;
			width:31.3%;
		}

		.large-block-grid-4 > .grid-item:nth-child(3n+3) {
			margin-right:0;
		}

	}


}



/* ==============================================================================
/* ====== MEDIUM (MIN WIDTH ONLY - 768px) TABLET + SOME DESKTOP ELEMENTS & STYLES
/* ============================================================================ */

@media only screen and (min-width: 768px) {
	
	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE 
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }

	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE 
	/* ================================================== */


	.brand-container { margin: 25px auto; }
	
	.payment-methods ul { text-align: right; }

	.large-block-grid-4 > .grid-item {
		border: 1px solid #DDD;
		border-radius: 3px;
		margin: 0 2.666% 2.666% 0;
		padding: 7px;
		width: 23%;
	}

	.large-block-grid-4 > .grid-item:nth-child(4n+4) {
		margin-right: 0;
	}


}


/* ==============================================================================
/* ====== MEDIUM (MIN 768px - 979px MAX) TABLET SPECIFIC ELEMENTS & STYLES
/* ============================================================================ */

@media only screen and (min-width: 768px) and (max-width: 979px) {
	
	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE 
	/* ================================================== */
	

	.main-nav a { padding: 10px; }
	
  
}



/* ==============================================================================
/* ====== LARGE (MIN WIDTH ONLY - 980px) PRIMARY DESKTOP ELEMENTS & STYLES
/* ============================================================================ */

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

	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE 
	/* ================================================== */
	
	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.search-options { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }

	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE 
	/* ================================================== */


	.grid-container { padding: 0 0 0 10px; }
	
	.main-nav a { padding: 10px 15px; }


}



/* ==============================================================================
/* ====== (ORIENTATION PORTRAIT ONLY) TOUCH ENABLED ELEMENTS & STYLES	 
/* ============================================================================ */

@media only screen and (orientation: portrait) {

	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE
	/* ================================================== */
	
	
	.element { /* ADDITIONAL STYLES HERE */ }
	
	
}



/* ==============================================================================
/* ====== (HIGH RES ONLY 1.5x PIX RATIO) HIGH RESOLUTION ELEMENTS & STYLES	 
/* ============================================================================ */

@media  (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 32),
		(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi),(min-resolution: 1.5dppx) {

	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE
	/* ================================================== */
	

	.element { /* ADDITIONAL STYLES HERE */ }


}



/* ==============================================================================
/* ====== (RETINA ONLY 2x PIX RATIO) RETINA RESOLUTION ELEMENTS & STYLES	 
/* ============================================================================ */

@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-pixel-ratio: 2) {
	
	/* ====================================================
	/* ===== SHOW & HIDE YOUR ELEMENTS HERE
	/* ================================================== */

	/* HIDE ALL OF THESE ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: none!important; }
	
	/* SHOW BLOCK LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: block!important; }
	
	/* SHOW INLINE-BLOCK ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline-block!important; }
	
	/* SHOW INLINE LEVEL ELEMENTS (LIST ALL CLASSES & ID's) */
	.element { display: inline!important; }
	
	/* ====================================================
	/* ===== END SHOW & HIDE DECLARATIONS HERE
	/* ================================================== */
	
}