/* :: Media
===================================================================================================== :: */

@media only screen and (max-width: 1100px) {

#site .nav-collapse {
	position: relative; display: block; float: right; width: 56px; height: 56px; 
	margin: 0 -16px 0 0; padding: 0; text-decoration: none; 
	background-image: url(nav-collapse-b.png); background-repeat: no-repeat; background-position: 50% 15px;
}
#site .nav-collapse.on {background-position: 50% -85px; background-color: white;}
	
	.nav-wrapper {display: none; clear: both; margin: 0 -16px; padding: .3em .3em .2em; text-align: center; background-color: white;}
	.nav-collapse.on + .nav-wrapper {display: block;}
	
	#main-nav {width: 100%; margin-bottom: .2em; padding: .3em 0 0; text-align: center; border-style: solid; border-width: 1px 0; border-color: #ccc;}
		#main-nav > ul {width: 100%;}
		#main-nav li, #header .meta li {float: none; display: inline-block;}
			#main-nav a {padding: .5em .7em;}
			#header .meta {clear: both; float: none;}
				#header .meta ul {padding: 0;}

/*#header-graphic .inner {padding-right: 0; background-image: none;}*/
	.brands h2 {margin: .4em 0; font-size: 1.5em;}
	.brands #brand50 {display: none;}

.item-col-3 .item-content > section {font-size: .9em;}

}

@media only screen 
and (max-width: 960px) {

/*#header-graphic .wrapper {padding-left: 16px; background-image: none;}*/

.item-col-3 .item-content > section {width: 50%; font-size: 1em;}
.item-col-3 .item-content > section:nth-child(3n+1) {clear: none;}
.item-col-3 .item-content > section:nth-child(2n+1) {clear: both;}

.col-60 {width: 100%;}

}

@media only screen 
and (max-width: 767px) {

/*#header-graphic .wrapper {padding-right: 16px;}*/
.brands li {width: 20%;}

.item-col-3 .item-content > section, .item-gallery, .item-overview {width: 100%;}

.item-col-3 .item-content > section {clear: both;}

.b-heater a {font-size: 1.3em; text-transform: none;}

.item-gallery {margin-right: 0;}

.inline-block-label label {width: 100%;}

.main-items .shopping {position: relative; padding: 0;}

:root .contact.form-elements .form-group {width: 100%;}
.contact.form-elements .form-group.last {position: static;}

}

@media only screen 
and (max-width: 600px) {
	
#side-bar {width: 100%;}

#content {clear: both; margin-left: 0;}
	
}

@media only screen 
and (max-width: 480px) {

.brands li {width: 25%;}
	
}