/* =Lightweight Responsiveness
 *
 * This file is called from the /inc/init-functions.php file
 * specifically for core Volatyl responsive CSS. Whether or
 * not this stylesheet is used is determined by the Responsive
 * CSS option in the Volatyl General Settings.
 *
 * To alter this CSS in a child theme, simply write new responsive
 * CSS in your child theme's style.css file. To completely disable
 * this responsive CSS to use your own, use the General Settings
 * option to disable this CSS and then start from scratch in your
 * child theme's style.css file. 
-------------------------------------------------------------- */

@media screen and (max-width: 960px) 
{
	.main,
	#container {
		width: 100%;
	}
	.two-col #content { 
		width: 65%; 
	}
	.two-col #sidebars { 
		width: 35%; 
	}
	.css #content, 
	.ssc #content { 
		width: 55%; 
	}
	.three-col #sidebars { 
		width: 22.5%; 
	}
	.scs #sidebars.sidebar-1 { 
		width: 32.41379%; 
	}
	.scs #sidebars.sidebar-2 { 
		width: 24.47917%; 
	}
	.scs #wrap { 
		width: 75.52083%; 
		padding: 0; 
	}
	.scs #content { 
		width: 67.58621%; 
	}
	#container > .site-header,
	#container > .site-footer {
		border-left: 0;
		border-right: 0;
	}
	.landing .main #content,
	.squeeze .main #content,
	.landing #container #content,
	.squeeze #container #content { 
		width: 100%;
	}
}

@media screen and (max-width: 850px) 
{
	.squeeze #main-content .main,
	.squeeze #main-content { 
		width: 100%;
	}
}

@media screen and (max-width: 768px) 
{
	
	/* =Responsive Menus
	-------------------------------------------------------------- */
	
	.header-menu-toggle,
	.standard-menu-toggle,
	.footer-menu-toggle,
	.header-navigation.toggled .nav-menu,
	.standard-navigation.toggled .nav-menu,
	.footer-navigation.toggled .nav-menu,
	.header-navigation .menu ul,
	.secondary-navigation .menu ul,
	.header-navigation .menu a,
	.secondary-navigation .menu a {
		display: block;
	}
	
	.header-navigation,
	.secondary-navigation {
		padding: 0;
	}
	
	.header-navigation,
	.secondary-navigation,
	.header-navigation .menu li ul,
	.secondary-navigation .menu li ul {
		position: static;
		text-align: center;
		padding: 0;
	}

	.header-navigation ul,
	.secondary-navigation ul {
		display: none;
	}
	
	.header-navigation.toggled .nav-menu {
		background: #fff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		margin: 1em 0;
	}
	
	.secondary-navigation.toggled .nav-menu {
		margin: 0 0 1em;
	}
	
	.header-navigation .menu li,
	.secondary-navigation .menu li {
		display: block;
		padding: 0;
	}

	.header-navigation .menu li ul li,
	.secondary-navigation .menu li ul li {
		padding: 0;
	}
	
	.header-navigation .menu a,
	.secondary-navigation .menu a,
	.header-navigation .menu li ul a,
	.secondary-navigation .menu li ul li a {
		padding: 1em .66667em;
		width: 100%;
		box-sizing: border-box;
	}
	
	.header-navigation .menu li ul a,
	.secondary-navigation .menu li ul li a {
		background: none;
		border: 0;
	}
	
	/* all other styles */
	
	.landing #main-content .main,
	.landing #container #main-content {
		width: 100%;
	}
	.landing #main-content .main,
	.landing #container #main-content { 
		margin: 0 auto; 
	}
	.product-box {
		width: 49.5%;
	}
	#main-content #content,
	#main-content #sidebars,
	.scs #wrap,
	.nav-previous, 
	.nav-next {
		float: none;
		width: 100%;
	}
	.nav-previous {
		padding-right: 0;
	}
	.nav-next,
	.paging-navigation .nav-next, 
	.comment-navigation .nav-next, 
	.image-navigation .nav-next {
		padding-left: 0;
		text-align: left;
	}
	.site-header {
		text-align: center;
		padding-bottom: 1em;
	}
	.site-description { 
		margin-bottom: .66667em; 
	}
	#content .pagination {
		float: none;
	}
	.two-footer-col .footer-widget,
	.three-footer-col .footer-widget {
		float: none;
		margin-right: 0;
		width: 100%;
	}
}

@media screen and (max-width: 480px) 
{
	.site-footer {
		text-align: center;
	}
	.product-box {
		width: 100%;
	}
	img[class*="wp-image-"] {
		float: none; 
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}