/**
 * responsive.css
 *
 * Contains media queries for various device widths.
 */

.top_nav .wrap,
.container {
	width: 96%;
	max-width: 980px;
}

/* ---------------------------------------------------------------
 * 1. TABLET
 * CSS fallback for device width 768px or below
 * ------------------------------------------------------------ */

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

	.brand,
	.header_widget_area {
		float: none;
		width: auto;
		max-width: 100%;
		margin-bottom: 20px;
		padding: 0;
	}

	.brand {
		padding-top: 20px;
	}

	.container {
		margin-top: 2%;
	}

	header_wrap {
		padding-top: 20px;
	}

	.top_nav,
	.nav1 {
		display: none;
	}

	.utility .wrap {
		background: #fff;
		border: none;
	}

	.menu-drop {
		display: block;
	}

	.abc .sidebar1,
	.abc .sidebar2,
	.bac .sidebar1,
	.bac .sidebar2 {
		width: 47.9%;
	}

	.bca .sidebar1,
	.acb .sidebar2,
	.abc .content,
	.bac .content,
	.cab .sidebar2,
	.cba .sidebar1 {
		float: none;
		clear: both;
		padding-top: 20px;
		width: 97.9166%
	}

	.cab .sidebar1,
	.cba .sidebar2,
	.bca .sidebar2,
	.acb .sidebar1,
	.sb-b .sidebar2 {
		width: 31.25%;
	}

	.cab .content,
	.cba .content,
	.bca .content,
	.acb .content,
	.sb-b .content_large {
		width: 64.5833%;
	}
}


/* ---------------------------------------------------------------
 * 2. MOBILE
 * CSS fallback for device width 600px or below
 * ------------------------------------------------------------ */

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

	.content,
	.content_medium,
	.content_large,
	.sidebar1,
	.sidebar2,
	.abc .sidebar1,
	.abc .sidebar2,
	.bac .sidebar1,
	.bac .sidebar2,
	.bca .sidebar1,
	.acb .sidebar2,
	.abc .content,
	.bac .content,
	.cab .sidebar2,
	.cba .sidebar1,
	.cab .sidebar1,
	.cba .sidebar2,
	.bca .sidebar2,
	.acb .sidebar1,
	.sb-b .sidebar2,
	.cab .content,
	.cba .content,
	.bca .content,
	.acb .content,
	.sb-b .content_large {
		float: none;
		width: 97.9166% !important;
		max-width: 97.9166%;
		text-align: left;
		margin: 0 auto 18px;
	}

	.content_full ul.grid_list.col4 li,
	ul.grid_list.col4 li,
	ul.grid_list.col5 li,
	ul.grid_list.col6 li,
	.notes_left,
	.notes_right,
	.column,
	.content .column {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 18px;
	}

	#commentform input[type="text"],
	#contactform input[type="text"],
	#commentform textarea,
	#contactform textarea {
		width: 100%;
		max-width: 100%;
	}

	.secondary .column,
	.notes_left,
	.notes_right,
	.commentlist ul.children {
		margin: 0;
	}

	.notes_left,
	.notes_right {
		text-align: left;
	}

}

/* ---------------------------------------------------------------
 * 3. MOBILE
 * CSS fallback for device width 480px or below
 * ------------------------------------------------------------ */

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

	ul.grid_list.col2 li,
	ul.grid_list.col3 li,
	.content_medium ul.grid_list.col2 li,
	.content_full ul.grid_list.col3 li,
	.content_full ul.grid_list.col4 li,
	.thumb_medium,
	.post_content {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 18px;
	}
	
	/* WooCommerce Responsive styles */
	
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	.woocommerce .related ul.products li.product,
	.woocommerce-page .related ul.products li.product,
	.woocommerce .upsells.products ul.products li.product,
	.woocommerce-page .upsells.products ul.products li.product,
	.woocommerce .related ul li.product,
	.woocommerce-page .related ul li.product,
	.woocommerce .upsells.products ul li.product,
	.woocommerce-page .upsells.products ul li.product,
	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce-page .cart-collaterals .cart_totals,
	.woocommerce .cart-collaterals .shipping_calculator,
	.woocommerce-page .cart-collaterals .shipping_calculator,
	.woocommerce .col2-set .col-1,
	.woocommerce-page .col2-set .col-1,
	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-2 {
		float: none;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images,
	.woocommerce #content div.product div.images,
	.woocommerce-page #content div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary,
	.woocommerce #content div.product div.summary,
	.woocommerce-page #content div.product div.summary {
		float: none;
		width: 100%;
		margin: 0 0 1.5em;
	}
	
	.woocommerce table.shop_table td,
	.woocommerce-page table.shop_table td {
		padding: 0.4em;
	}

}