/**
 * Media queries for various device widths, from the Volt theme 3.9.3. Not GPL:
 * licensed under the purchased Envato license (see licensing.txt).
 */

.container {
	width: 96%;
	max-width: 1020px;
}

/* ---------------------------------------------------------------
 * 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: 24px;
		text-align: center;
	}

	.header .wrap {
		padding-top: 16px;
	}

	.brand {
		margin-bottom: 16px;
	}

	.brand img {
		margin: 0 auto;
	}

	.primary-nav ul.nav-menu,
	.primary-nav div.nav-menu > ul {
		display: none;
	}

	.primary-nav.do-not-hide .nav-menu {
		display: block;
	}

	#responsive-menu {
		display: block;
	}

	.secondary .one_fourth {
		width: 48.9365%;
	}

	.secondary .one_fourth:nth-of-type(2n+3) {
		clear: both;
	}

	.secondary .one_fourth:nth-of-type(2n+2) {
		margin-right: 0;
	}
}

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

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

	.content_medium,
	.sidebar1 {
		float: none;
		width: 97.9166% !important;
		max-width: 97.9166%;
		text-align: left;
		margin: 0 auto 24px;
	}

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

	#commentform input[type="text"],
	#commentform 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,
	.post_content {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 24px;
	}
}